CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Andrew
Andrew

Reputation: 43113

Twitter Bootstrap / Twipsy

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!

Upvotes: 4

Views: 11741

Answers (4)

Ralph Lavelle
Ralph Lavelle

Reputation: 5769

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

Upvotes: 0

Evan
Evan

Reputation: 1

Or you can use "tooltip" like this:

<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

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55200

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/

Upvotes: 15

zengr
zengr

Reputation: 38899

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

Tipsy is the original jQuery plugin which was modified by Twitter for these:

(Twipsy is) Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!

Upvotes: 0

Related Questions