使用 jQuery 在工具提示中显示 table

Question

我试图在工具提示中显示 HTML 代码（div、table、...），但它没有显示，也没有显示显示任何错误。如果我使用带有一些文本的 <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>

Answer 1

您的问题与您放入其他元素中的元素类型有关。

例如：

您不能将

放在或

中

看这里：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>

使用 jQuery 在工具提示中显示 table

Show table in a tooltip with jQuery

javascript

css

jquery

tooltip