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和标记，this works：

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

Answer 2

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

使jquery工具提示动态化

2 个答案: