悬停时，工具提示显示图像？

Question

我希望完成的是编写一个小的jQuery脚本，它允许我获取块的内容并在有人将鼠标放在它上面时触发弹出窗口。在本质上，它将成为一个带有图像的工具提示。

我找到的所有教程都是在mouseover上替换图片，或者是仅包含文本的工具提示。下面是代码：

$(document).ready(function() { 
    $('div#block-block-14.block').hover(
     function() { 
      this.tip = this.title; 
      $(this).append(
      '<div class="toolTipWrapper">' 
      + '<div class="toolTipContent"></div>' 
      ); 
      this.title = ""; 
      this.width = $(this).width(); 
      $(this).find('.toolTipWrapper').css({left:this.width-22}) 
      $('.toolTipWrapper').fadeIn(300); 
     }, 
      function() { 
       $('.toolTipWrapper').fadeOut(100); 
       $(this).children().remove(); 
        this.title = this.tip; 
      } 
      ); 
}); 

这里是CSS代码：

div#block-block-14.block{ background:url(../images/QuadChartDropShadow.png);} 
.toolTipWrapper{width:175px;position:absolute;top:20px;display:none;color:#FFF;font-weight:bold;font-size:9pt} 
.toolTipContent{padding: 8 px 15px; background:url(../images/QuadCharDropShadow.png) no-repeat top;} 

Answer 1

对于提示，我会一直推荐qTip2。实现起来很简单，最好的是创建者是支持的，我在帮助和支持论坛上报告的每个问题总是有回应:)

要在工具提示中呈现图像很容易，可以通过多种方式完成

<img id='tooltip1' style="display:none;" src="../../Content/HomePage/aboutshop.JPG" /> 

$('#aboutshop').qtip({ 
    content: { 
    text: $('#tooltip1') 
    } 
}); 

或者

$('a').qtip({ 
     content: { 
     text: '<img src="test.png" />' 
     } 
    }); 

您可以查看更多的功能在这里：http://craigsworks.com/projects/qtip2/docs/

希望这有助于:)