我试图在工具提示(div、表格...)中显示 HTML 代码,但它没有显示,也没有显示任何错误。
如果我使用 <span>
标签里面有一些文本,它可以正常工作。但我需要在其中插入更多 HTML 代码。我该如何解决?
仅适用于 <span>
标签,我不知道如何解决这个问题,任何帮助?为什么会这样?
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
body {
margin: 0; padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
* {
outline: none;
}
img {border: none;}
a {color: #d60000; text-decoration: none;}
/*--Tooltip Styles--*/
.tip {
display: inline-block;
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p style="text-align:left;">My First
<a href="#" class="tip_trigger">Link
<span class="tip">
Some text. Works correctly!
</span>
</a>
</p>
<p style="text-align:left;">My Second
<a href="#" class="tip_trigger">Link
<div class="tip">
<table><tr><td>More text. Doesn't work!</td></tr></table>
</div>
</a>
</p>
最佳答案
您的问题与您放入其他元素中的元素类型有关。
例如:
您不能将
中
参见此处:Putting <div> inside <p> is adding an extra <p>
我用一个有效的代码更新了你的示例代码。
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).siblings('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
body {
margin: 0; padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
* {
outline: none;
}
img {border: none;}
a {color: #d60000; text-decoration: none;}
/*--Tooltip Styles--*/
.tip {
display: none;
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p style="text-align:left;">My First
<a href="#" class="tip_trigger">Link
</a>
<span class="tip">
Some text. Works correctly!
</span>
</p>
<div style="text-align:left;">My Second
<a href="#" class="tip_trigger">Link</a>
<div class="tip">
<table><tr><td>More text. Doesn't work!</td></tr></table>
</div>
</div>
关于javascript - 使用 jQuery 在工具提示中显示表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49383591/