如何使工具提示顯示在每個圖像旁

-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">

來源

2013-05-12 Olubunmi

您需要設置工具提示的位置某處，是在插件本身處理的，因爲它看起來像是默認爲'left：0;頂部：0;'。 – 2013-05-12 22:22:45

「tooltip」類的元素在哪裏？ – Xotic750 2013-05-12 22:25:40

我不想阻止你創建自己的，但我確實要確保你知道工具提示jQuery插件在twitter引導http://twitter.github.io/bootstrap/javascript.html#tooltips – Adam 2013-05-12 22:29:26

它需要有position: absolute與其父必須是position: relative。在懸停功能內部：

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

來源

2013-05-12 22:23:27

我添加了您提供的腳本，但仍顯示在頁面的左上角。謝謝 – Olubunmi 2013-05-12 22:28:42

你還需要改變函數（）來運行（e） – 2013-05-12 22:29:08

你能明白，我對jQuery的知識是相當基礎的。謝謝 – Olubunmi 2013-05-12 22:30:56

這一切都取決於工具提示節點的位置所在的位置。但是，您可以通過抓取並添加所有元素的所有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-12 22:40:03 DruhNave

下面是使用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-12 22:53:57 Xotic750

如何使工具提示顯示在每個圖像旁

回答

相關問題