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 looki

Answer 1

I think it's a bug. From http://twitter.github.com/bootstrap/assets/js/application.js you can see the demo is called with 'selector' option.

$('.tooltip-demo').tooltip({
  selector: "a[data-toggle=tooltip]"
});

But the 'show' function in bootstrap-tooltip.js will not check for 'selector' option when handling 'placement'. Therefore bug occurred.

    placement = typeof this.options.placement == 'function' ?
      this.options.placement.call(this, $tip[0], this.$element[0]) :
      this.options.placement

Demo for this bug: http://jsfiddle.net/indream/xFC7G/
Related github issue: https://github.com/twitter/bootstrap/issues/6832

Answer 2

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 3

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.