Menu
I'm using Bootstrap 2.3.2. My tooltips show up as expected, but when hovering off of the triggering element, the tooltip AND the triggering element are both hidden. There is an inline style of display:none being applied to the triggering element.
What is the best way to diagnose why this is happening? I fear it may be another JS library conflicting, but I'm not sure how to capture the event that is adding display:none to the triggering element.
458
Use the tooltip (“hide”) method in Bootstrap to hide the tooltip. The tooltip hides on button click as shown below − Above the data-toggle attribute can be seen which we set before on <a> element.
The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. Specifies how the tooltip is triggered.
Bootstrap Tooltip Plugin. The Tooltip Plugin. The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element: Tip: Plugins can be included individually (using Bootstrap's individual "tooltip.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip: Note: Tooltips must be initialized with JavaScript to work. By default, the tooltip will appear on top of the element.
I actually discovered this is a namespacing conflict from interaction between Prototype and Bootstrap 2.3.
https://github.com/twitter/bootstrap/issues/6921
Best bet is to comment out line this.$element.trigger(e) in bootstrap.js for now, or use 3.0 WIP.
130
Solution without any change on bootstrap.js
<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">info</span>
jQuery
jQuery(document).ready(function(){
jQuery('[data-toggle="tooltip"]').tooltip();
jQuery('[data-toggle="tooltip"]').on("hidden.bs.tooltip",
function() {
jQuery(this).css("display", "");
});
});
Reference
28
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
