javascript - Tooltips with Twitter Bootstrap

Question

I am using Twitter Bootstrap--and I am not a frontend developer! However, it's making the process almost--dare I say--fun!

I'm a bit confused about tooltips. They are covered in the documentation but Twitter assumes some knowledge. For example, they say to trigger the tooltip with the following JavaScript code.

$('#example').tooltip(options)

After poking around on their source, I realized that fields with tooltips need to be in a class and have the following code run.

$('.tooltipclass').tooltip(options)

But now my question is, why doesn't Twitter Bootstrap provide such a class tooltip? Just to allow greater configuration? Is it better to add the individual elements with tooltips to tooltipclass, or should I add the surrounding area to tooltipclass? Does it matter if I use a class identifier (.class) instead of a name identifier (#name)?

Answer 1

I think your question boils down to what proper selector to use when setting up your tooltips, and the answer to that is almost whatever you want. If you want to use a class to trigger your tooltips you can do that, take the following for example:

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>

Then you can trigger all links with the .link class attached as tooltips like so:

$('.link').tooltip()

Now, to answer your question as to why the bootstrap developers did not use a class to trigger tooltips that is because it is not needed exactly, you can pretty much use any selectors you want to target your tooltips, such as (my personal favorite) the rel attribute. With this attribute you can target all links or elements with the rel property set to tooltip, like so:

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

And your links would look like something like this:

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>

Of course, you can also use a container class or id to target your tooltips inside an specific container that you want to single out with an specific option or to separate from the rest of your content and you can use it like so:

$('#example').tooltip({
    selector: "a[rel=tooltip]"
})

This selector will target all of your tooltips with the rel attribute "within" your #example div, this way you can add special styles or options to that section alone. In short, you can pretty much use any valid selector to target your tooltips and there is no need to dirty your markup with an extra class to target them.