Question

我正在使用Bootstrap 2.3.2。我的工具提示按预期显示，但当悬停在触发元素上时，工具提示和触发元素都被隐藏。内联样式display:none应用于触发元素。

诊断为何发生这种情况的最佳方法是什么？我担心它可能是另一个JS库冲突，但我不知道如何捕获将display:none添加到触发元素的事件。

Answer 1

我实际上发现这是Prototype和Bootstrap 2.3之间交互的命名空间冲突。

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

最好的办法是暂时在bootstrap.js中注释掉this.$element.trigger(e)行，或使用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", "");
    });
});

Reference

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

Bootstrap Tooltip隐藏了selector / toggle元素

4 个答案: