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

Question

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

我找到的所有教程都在鼠标悬停时替换图片，或者是仅包含文本的工具提示。这是代码:

$(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/

希望这有帮助:)