Apparently you can add a Twitter Bootstrap tooltip to any element that has the .tooltip class, like so:

$(document).ready(function() {
    $("a[rel='tooltip'], .tooltip").tooltip();
});

However, adding this class to a span tag does not seem to work. Example:

<p>1 + 1 = <span class="tooltip" title="Wooo!">2</span></p>

Only links seem to work with tooltips. Example:

<p>2 + 2 = <a href="#" rel="tooltip" title="Wooo!">4</a></p>

Here's a jsFiddle to demonstrate: /

So how can I display a tooltip for text wrapped in a span?

Apparently you can add a Twitter Bootstrap tooltip to any element that has the .tooltip class, like so:

$(document).ready(function() {
    $("a[rel='tooltip'], .tooltip").tooltip();
});

However, adding this class to a span tag does not seem to work. Example:

<p>1 + 1 = <span class="tooltip" title="Wooo!">2</span></p>

Only links seem to work with tooltips. Example:

<p>2 + 2 = <a href="#" rel="tooltip" title="Wooo!">4</a></p>

Here's a jsFiddle to demonstrate: http://jsfiddle/ZznzE/

So how can I display a tooltip for text wrapped in a span?

• javascript
• twitter-bootstrap
• tooltip
• html

1 Answer 1

You don't need a class="tooltip", but a rel="tooltip"

Like this:

<p>1 + 1 = <span rel="tooltip" title="Tip 1">2</span></p>

I updated your fiddle and it works fine now: http://jsfiddle/Xz2e7/1/

I also added a cursor: pointer to the CSS on the span tag. For usability this is better, so people know where there is interaction on the page.

Edit:

The tooltip class is not meant for using like you want to use it. the tooltip class is taking care of the tooltip itself (making it invisible when not hovering for example).

Try this: http://jsfiddle/Xz2e7/3/