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.

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.

• javascript
• css
• twitter-bootstrap

• Could you provide a link to the site you're having the issue on? – foiseworth Commented Jun 26, 2013 at 8:43

5 Answers 5

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.

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

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);
    }

This solution does not flicker...

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

For the googlers; for me all of the answers did not work. So here is (not the best) but a really simple workaround:

Add this to your css:

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