Jquery隱藏的DIV鼠標懸停工具提示

Question

我已經研究得很好，但還沒有設法找到任何東西，它可能會更快，自己寫！我有包含在'li'標籤內的內容，其中的內容是對用戶隱藏的DIV。我基本上是在尋找一些東西，當你將鼠標懸停在特定的li上時，它所包含的div會一直彈出，並且隨着光標在鼠標上的移動而移動。有沒有人知道會做到這一點的東西？

Answer 1

這項工作適合你嗎？

http://flowplayer.org/tools/tooltip/index.html

我不知道，如果它專門處理您的情況，要顯示出對李的鼠標懸停div的內容，但我知道它可以顯示HTML內容。

Answer 2

編輯

不明白你的問題。看到源此頁：

http://www.lbstone.com/reference/jquery/follow_mouse.html

在這裏你可以找到的代碼，你想要做

Answer 3

你可以只是有點的jQuery和CSS實現這一點的：

HTML：

<ul> 
    <li> 
     <div>Content goes here</div> 
     <div class="tooltip">Tooltip!</div> 
    </li> 
    <li> 
     <div>More content!</div> 
     <div class="tooltip">Another tooltip!</div> 
    </li> 
</ul> 

CSS：

.tooltip { 
    position:absolute; 
    display:none; 
    z-index:1000; 
    background-color:black; 
    color:white; 
    border: 1px solid black; 
} 

的JavaScript：

$("li").bind("mousemove", function(event) { 
    $(this).find("div.tooltip").css({ 
     top: event.pageY + 5 + "px", 
     left: event.pageX + 5 + "px" 
    }).show(); 
}).bind("mouseout", function() { 
    $("div.tooltip").hide(); 
}); 

這裏發生的事情：

1. 爲mousemove事件的事件處理程序連接每一個列表項。
2. 在此聆聽者內部，使用find方法找到div的類別tooltip，該類別位於發生該事件的li之下。
3. top和left CSS屬性根據事件發生的位置（鼠標的當前位置）設置，並顯示div。
4. 附加mouseout事件的另一個事件處理程序，它隱藏了顯示的任何工具提示。

您可以調整選擇器以反映您的確切HTML結構。這裏有一個工作示例：http://jsfiddle.net/andrewwhitaker/tSHZS/