Bootstrap tooltip hides selector / toggle element

Question

I am using Bootstrap 2.3.2. My tooltips are displayed as expected, but when I hang with the launch item, the tooltip AND trigger element are hidden. There is a built-in display:none style applied to the startup element.

What is the best way to diagnose why this is happening? I'm afraid this might be another conflicting JS library, but I'm not sure how to capture an event that adds display:none to the trigger.

Answer 1

I really found that this is a name conflict between the Prototype and Bootstrap 2.3 interactions.

https://github.com/twitter/bootstrap/issues/6921

It is best to comment on the line this.$element.trigger(e) in bootstrap.js or use 3.0 WIP.

Answer 2

Solution without any changes to 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", ""); }); }); 

Link

Answer 3

Add this after jquery.js including

  jQuery.noConflict(); //Remove conflict between prototype and bootstrap functions if (Prototype.BrowserFeatures.ElementExtensions) { var disablePrototypeJS = function (method, pluginsToDisable) { var handler = function (event) { event.target[method] = undefined; setTimeout(function () { delete event.target[method]; }, 0); }; pluginsToDisable.each(function (plugin) { jQuery(window).on(method + '.bs.' + plugin, handler); }); }, pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab']; disablePrototypeJS('show', pluginsToDisable); disablePrototypeJS('hide', pluginsToDisable); } 

Answer 4

This solution does not flicker ...

 $('[data-toggle="tooltip"]').tooltip() .on('hide.bs.tooltip', function(e) { e.preventDefault(); $('div.tooltip').hide(); }); 

Answer 5

For googlers; for me all the answers did not work. So here is a (not the best), but a very simple way:

Add this to your css:

 [data-toggle="tooltip"] { display: initial !important; }