Twitter Bootstrap / Twipsy

Question

I like the idea of the Twipsy plugin that is bundled as part of Twitter Boostrap, but it doesn't seem to work correctly.

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

As you can see, using the default settings as prescribed by the docs, the tooltip appears when you hover over the tool-tipped anchor, but it doesn't go away when you move the mouse away.

I understand that the appearance of the tooltip relies on CSS, but on the Twitter docs page the tooltips are being added and removed from the DOM by the script, whereas in this example and in my own local tests the script adds the tip but never removes 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 as to why this is behaving as it is.

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

Thanks!

Answer 1

As you have noted, your code is not working because you have not added the CSS file to your resources.

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

Because in that CSS file there are two classes called

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

When you move mouse in, the Tool-tip gets prepended to body and it gets class="twipsy fade in" The in gets removed on the hide function of the tool-tip making it invisible (opacity=0).

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

Please note that its not removing the element from DOM as in the original example. More investigation of the CSS will surely shed some light there.

If you ask me my favorite tool-tip plugin, I use Jörn Zaefferer's lightweight tooltip plugin (4kb compressed). It suits my purpose well.

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