Question

我有几个图像，我应用jQuery工具提示效果..它的工作原理，但问题是，无论图像我点击工具提示只显示在页面的顶部。有没有办法让工具提示出现在每个被点击的图像旁边。

到目前为止我的jQuery看起来像这样：

$('.image').hover(function () {
    $('.tooltip').fadeIn(1000);
}, function () {
    $('.tooltip').fadeOut(1000);
});

$('.tooltip').css({
   top: e.pageY,
   left: e.pageX
})

CSS

.tooltip {
    display: none;
    height: auto;
    position: absolute;
    background-color: #D1C585;
    color: black;
    border: 2px solid rgba(128, 0, 32, 0.3);
    padding: 5px;
    border-radius: 5px;
    font-family: actor;
}

HTML

<img src="image.jpg" class="image">

Answer 1

它需要position: absolute，其父级必须为position: relative。在悬停功能内部执行：

$('.tooltip').css({
  top: e.pageY,
  left: e.pageX
})

Answer 2

这完全取决于工具提示节点的位置。但是，您可以通过抓取并添加所有元素及其父元素的所有offsetLeft / offsetTop来获取图像的固定位置。例如。

$('.image').hover(function() {
    var e = this,top=0,left=0;
    while(e){
        top+=e.offsetTop;
        left+=e.offsetLeft;
        e=$(e).parent();
    }
    $(this).css({position:'fixed',top:top+"px",left:left:left+"px"});
    $('.tooltip').fadeIn(1000);
}, function() {
    $('.tooltip').fadeOut(1000);
});

我没有测试这段代码。但是，我希望这能指出你正确的方向。然后，您可以使用图像的大小（offsetHeight和offsetWidth）来定位图像周围的工具提示。

Answer 3

以下是使用jquery ui的示例，请参阅jquery ui tooltip了解文档

HTML

<img src="http://img262.imageshack.us/img262/68/sahara4rs.jpg" title="tyre">

的Javascript

$(document).tooltip({
    track: true,
    show: {
        effect: "fade",
        delay: 1000
    },
    hide: {
        effect: "explode",
        delay: 250
    }
});

在jsfiddle

上

如何在每个图像旁边显示工具提示

3 个答案: