Make a jquery tooltip dynamic
How can make a dynamic jQuery tooltip with .mousemove
, as that when mouse enter on words Tooltip1
Or Tooltip2
Or Tooltip3
show contents same tooltip.
Here is a sample of my 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="toolt开发者_运维百科ip">
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>
i think this is what you are looking for http://jsfiddle.net/jalbertbowdenii/QGTTN/10/
I'm not entirely sure how you want this presented, but with the provided CSS and markup, this works:
$('a.tool_tip').hover(function() {
$(this).prev('.tooltip').show();
}, function() {
$(this).prev('.tooltip').hide();
});
精彩评论