Bootstrap tooltip data-toggle

Question

In the Bootstrap documentation page, the tooltip has a signature of:

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

What does the "data-toggle" attribute do in this scenario?

I know it's useful for tabs but I don't see what usefulness it can bring to tooltips.

---

Chris,

The tooltip has to be initialized explicitly as in:

$(document).ready(function(){
    $(".link").tooltip();
});

Assuming that the "a" tag has a class of "link". The "data-toggle" attribute is not mandatory for the tooltip to function correctly. But you mentioned that it is for the Bootstrap JavaScript file to recognize if something is a tooltip. So it doesn't seem to make sense that omitting "data-toggle" still makes the tooltip work (as long as there is the explicit initialization). Could you explain further?

Edit #2:

After reading some GitHub issue pages, I think I have come to the following conclusion (which is my best guess).

Originally, in older versions of Bootstrap, the tooltip signature was:

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
...
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a>

And developers could do:

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

To activate all tooltips at once (since each tooltip requires an initialization to work). In other words, it was just a convenient way to identity all the tooltips so that you can use jQuery to activate all of them.

But rel="tooltip" did not validate against HTML5, so folks started suggesting using data-toggle="tooltip" because Bootstrap already uses data-toggle for other components and data-* is valid in HTML5.

Thus, my guess is that there is no special semantic meaning or purpose for data-toggle="tooltip" other than to provide a convenient way to identity all tooltips.

Note that you could also identity the tooltips using ID or class, but why not activate all tooltips at once (rhetorical question)?

Answer 1

After reading some GitHub issue pages, I think I have come to the following conclusion (which is my best guess).

Originally, in older versions of Bootstrap, the tooltip signature was:

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
...
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a>

And developers could do:

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

To activate all tooltips at once (since each tooltip requires an initialization to work). In other words, it was just a convenient way to identify all the tooltips so that you can use jQuery to activate all of them.

But rel="tooltip" did not validate against HTML5, so folks started suggesting using data-toggle="tooltip" because Bootstrap already uses data-toggle for other components and data-* is valid in HTML5.

Thus, my guess is that there is no special semantic meaning or purpose for data-toggle="tooltip" other than to provide a convenient way to identity all tooltips.

Note that you could also identify the tooltips using ID or class, but why not activate all tooltips at once (rhetorical question)?