Twitter Bootstrap / Twipsy

Question

I like the idea of ​​the Twipsy plugin that is included with Twitter Boostrap, but it seems to be working incorrectly.

Here's jsfiddle: http://jsfiddle.net/burlesona/DUPyR/

As you can see, using the default settings as prescribed by the documents, a tooltip appears when you hover over a snap with the tool, but it does not disappear when you move the mouse.

I understand that the appearance of the tooltip depends on the CSS, but on the docs page on Twitter, tooltips are added and removed from the DOM with a script, whereas in this example and in my own local tests, the script adds the tooltip, but does not delete it.

Here's a link to the script: http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js

Any ideas / suggestions? I'm pretty confused why this is the way it is.

Alternatively, if anyone has a better suggestion for a clean, easy jQuery tooltip plugin, please let me know.

Thanks!

Answer 1

As you already noted, your code does not work because you did not add the CSS file to your resources.

Working example: http://jsfiddle.net/DUPyR/1/

Because there are two classes in this CSS file called

.fade { -moz-transition: opacity 0.15s linear 0s; opacity: 0; } .fade.in { opacity: 1; } 

When you move the mouse, the Tooltip is added to the body and gets class="twipsy fade in" . in is removed from the hide tool-tip function, making it invisible ( opacity=0 ).

Working example with minimal CSS: http://jsfiddle.net/DUPyR/3/

Note that this does not remove the element from the DOM, as in the original example. A closer look at CSS will certainly shed some light there.

If you ask me, my favorite hint plugin, I use the lightweight Jörn Zaefferer popup plugin (compressed 4kb). It suits my purpose well.

Link here: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 2

I'm not sure why twipsy is not working, but tipsy is working: http://jsfiddle.net/X6H2Y/

Tipsy is the original jQuery plugin that was modified by Twitter:

(Twipsy is) Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version that does not rely on images, uses css3 for animations and data attributes to store headers!

Answer 3

Or you can use the "hint" as follows:

 <div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div> <script type='text/javascript'> $(window).load(function(){ $('div[rel=tooltip]').tooltip(); });</script> 

rel: http://twitter.github.com/bootstrap/javascript.html#tooltips

Answer 4

Yes, it seems now it has been removed as a separate plugin (2.3.1 at the time of writing), but there is a ToolTip plugin that comes with the main bootstrap.js file, so you should do it.