-1

我有几张图像，我在上面应用了 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">
4

3 回答 3

0

这一切都取决于工具提示节点的位置。但是，您可以通过抓取并添加所有元素及其父元素的所有 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）将工具提示定位在图像周围。

于 2013-05-12T22:40:03.497 回答
0

这是一个使用 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 上

于 2013-05-12T22:53:57.687 回答
0

它需要有position: absolute，它的父级必须是position: relative。在悬停功能中执行以下操作：

$('.tooltip').css({
  top: e.pageY,
  left: e.pageX
})
于 2013-05-12T22:23:27.343 回答