javascript - How to apply a Twitter Bootstrap tooltip to text wrapped in a <span>? - Stack Overflow

admin管理员组

文章数量:1429508

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

Share Improve this question Follow edited Jun 27, 2013 at 9:20 XåpplI'-I0llwlg'I - asked Jun 27, 2013 at 9:02 XåpplI'-I0llwlg'I -XåpplI'-I0llwlg'I - 22.5k2828 gold badges107107 silver badges155155 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/

本文标签： javascriptHow to apply a Twitter Bootstrap tooltip to text wrapped in a ltspangtStack Overflow