Twitter bootstrap tooltip directions not working?

Question

I noticed that my twitter bootstrap tooltips were not respecting data-position.

So, I headed over to the Twitter Bootstrap tooltips demo, specifically looking at the "Tooltip on X" examples, and this is what I get:

It looks like there is no support for the direction?

But, the popovers, which the tooltips inherit from (or possibly it's the other way around?) work:

Browsers tried:

Chromium 24.0 on Ubuntu 12.10
Firefox 19.0 on Ubuntu 12.10

Is this a bug that should be reported, or something else going on here?

Answer 1

Jsfiddle Jsfiddle with tooltip working

Its not a bug , but we need to initialize them .
Important Bootstrap website states "For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initialize them yourself." Bootstrap website Tooltip section

<div class="navbar tooltip-demo">
        <ul class="nav">
          <li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
          <li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
          <li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
          <li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
        </ul>
      </div>

The javascript to use , you will have to initialize

$('a').tooltip();

Answer 2

The easiest way I have found to initialize tooltips with Bootstrap is to match their code so any of your tooltips will work.

$(function () {
    $("[data-toggle='tooltip']").tooltip();
});

OR you can actually add this line to the very end of your bootstrap-tooltip.js file

}(window.jQuery);  //<-- last line of bootstrap-tooltip.js

$("[data-toggle='tooltip']").tooltip();

I basically planned on if I am going to use the tooltip code, then I might as well have it enabled by default. So, I put this in my bootstrap-tooltip.js file.