Twitter Bootstrap tooltip for span tag (not for a tag)

Question

My question is based on SO question Bootstrap tooltips not working

So, the solution is to use: jQuery:

$("[rel='tooltip']").tooltip();

html:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

And that works perfect. My question is: what if I want to use a <span> tag instead of <a>.

Should it be <span rel="tooltip" title="A nice tooltip">Hover on me</span> ?

It works perfectly but I see the rel attribute is used for a tags.

So, what's the correct solution?

Answer 1

Your can write in the following ways :

Method 1

  <a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a>

And Than initialize it with the following code :

$('a').tooltip();

The other way is to use classes or ids and initialize them one by one like :

Method 2

 <span class="top" title="A nice tooltip" data-original-title="Tooltip on right">Hover on me</span>      

<a class="top" title=""  href="#" data-original-title="Tooltip on top">Tooltip on top</a>

Than initializing it with the following code :

$(".top").tooltip({
placement: "top"
});

Jsfiddle Method 1

Jsfiddle Method 2

Answer 2

If you don't want to use a rel attribute on a <span>, simply use something else like a class and update the tooltip selector, eg:

$("[rel='tooltip'], .tooltip").tooltip();

<span class="tooltip" title="A nice tooltip">Hover on me</span>

You can use any CSS selector inside the jQuery function $() to select any element on the page in any way.