Menu
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:
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?
850
Approach: Initialize tooltips in bootstrap disabled buttons with the specified element and call the tooltip() method. To trigger tooltip on disabled button by wraping them in <span> span tag and <div> div tag and then adding 'data-toggle','data-placement' and 'title' attributes to it along with its values respectively.
Positioning of tooltips So to position a tooltip as your requirement just add data-bs-placement=”top/right/left/bottom” attribute to your <a> or <button> tag to change tooltip position.
Bootstrap's interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to work for touch, mouse and keyboard users.
As we mentioned in the preamble, tooltips are completely "mute" to any interactions as to not steal hover events from elements underneath them. Even placing interactive elements, such as links, into content of tooltip will not work.
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();
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
