Bootstrap tooltip data-toggle

Question

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

hover over me
         


        

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)?

Answer 2

They've chosen to use data-toggle as an indicator in their JavaScript for when something is a tooltip. When the tooltips JS file sees the data-toggle="tooltip" attribute, it knows to kick in and run.

A more common approach might be to use a class (<a href="#" class="tooltip" title="first tooltip">hover over me</a>), but they've gone data-* attribute instead. Does the same thing, works, and philisophically, data-* attributes were designed for JavaScript manipulation, so I suppose it's good to keep it class free.

Answer 3

i use this:

<script>
    $('[title]').tooltip();
</script>

it selects all elements where is attribute title defined, and replaces default tooltip behavior with the bootstrapped one..