Bootstrap Tooltip隱藏了selector / toggle元素

Question

我正在使用Bootstrap 2.3.2。 我的工具提示按預期顯示，但當懸停在觸發元素上時，工具提示和觸發元素都被隱藏。 display:none內聯樣式display:none應用於觸發元素。

診斷為何發生這種情況的最佳方法是什么？ 我擔心它可能是另一個JS庫沖突，但我不知道如何捕獲向觸發元素添加display:none的事件。

Answer 1

我實際上發現這是Prototype和Bootstrap 2.3之間相互作用的命名空間沖突。

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

最好的辦法是在現在注釋掉這一行this.$element.trigger(e)在bootstrap.js中，或者使用3.0 WIP。

Answer 2

解決方案沒有任何改變 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", "");
    });
});

參考

Answer 3

在jquery.js之后添加它

    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

這個解決方案沒有閃爍......

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

Answer 5

對於googlers; 對我來說，所有的答案都沒有用。 所以這里（不是最好的），但一個非常簡單的解決方法：

將此添加到您的CSS：

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