Question

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

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

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

希望这有帮助：）

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

1 个答案: