Tooltip on Twitter Bootstrap

Just now I managed to use Tooltip on Twitter Bootstrap theme for my website. I follow just the template in the example

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

But nothing happend as expected. All the file included there, the bootstrap.js and the bootstrap.css with complete feature in it.
Check inside the bootstrap.css, there are entry for tooltip class. Also in the bootstrap.js there are handler for Tooltip.

Searching around via google, i found out that Bootstrap ToolTip feature cannot be used just like that, you need to add some invocation in the head, when document.ready function.

Here are the script to make tooltip activated :

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
</script>

And that's it, the tooltip now active and as what expected. Why this is not stated in the example. Documentation really need to be updated. I documented this one in this blog as my own preference and if you ever found it, surely it will help you.

Posted in: TwitterBootstrap