使jQuery工具提示动态化

Question

如何使用.mousemove制作动态jQuery工具提示，就像当鼠标在单词Tooltip1或Tooltip2或Tooltip3上输入文字时一样，显示内容相同的工具提示。

这是我的html示例： http : //jsfiddle.net/JGx52/4/

<ul>
    <li class="style">
    <div class="tooltip" style="bottom: 406px; left: 565px; opacity: 0.9; display: none; ">
         Simple or Rich A simple call such as $("img[title]").tooltip(); will enable tooltips by taking advantage of the element's title attribute. If you want complex tooltips with images, tables, forms and links that's possible by placing the tooltip element manually next to the trigger element. Configure design, timing and positioning Use CSS to create rounded borders, arrows, gradients or shadows. Big or small, high or low. Use the configuration to tweak pre and post-delays and positioning to your personal needs. Fading, sliding, dynamic Tooltip comes with two built-in effects: toggle, and fade and one separate effect, slide, and you can easily build your own effects. The dynamic plugin will dynamically change the tooltip's position so that it always stays in the viewport. File size: 1.10 Kb This tool has all the features and configuration options you'll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb.
    </div>
    <a href="" class="tool_tip" title="">ToolTip1</a></li>
    <li class="style">
    <div class="tooltip">
         jQuery Lint (edge)
    </div>
    <a href="" class="tool_tip" title="">ToolTip2</a></li>
    <li class="style">
    <div class="tooltip">
         Please read the documentation. For updates please follow our blog, tweets or become a fan.
    </div>
    <a href="" class="tool_tip" title="">ToolTip3</a></li>
</ul>

Answer 1

我不完全确定您希望如何显示此内容，但是使用提供的CSS和标记， 可以正常工作 ：

$('a.tool_tip').hover(function() {
    $(this).prev('.tooltip').show();
}, function() {
    $(this).prev('.tooltip').hide();
});

Answer 2

我认为这就是您正在寻找的http://jsfiddle.net/jalbertbowdenii/QGTTN/10/