引导工具提示隐藏选择器/切换元素答案

【问题标题】：Bootstrap Tooltip hides selector/toggle element引导工具提示隐藏选择器/切换元素
【发布时间】：2013-06-26 01:51:12
【问题描述】：

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

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

【问题讨论】：

您能否提供一个指向您遇到问题的网站的链接？

标签： javascript css twitter-bootstrap

【解决方案1】：

对于谷歌员工；对我来说，所有的答案都不起作用。所以这里是（不是最好的）但一个非常简单的解决方法：

将此添加到您的 CSS：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

现在最好在 bootstrap.js 中注释掉 this.$element.trigger(e) 行，或者使用 3.0 WIP。

【讨论】：

【解决方案4】：

解决方案在 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

【讨论】：

这是一个很好的方法，但是当元素隐藏并再次从代码中显示时，您对元素的闪烁有何建议？？
请在下面查看我的答案以获得不闪烁的解决方案

【解决方案5】：

此解决方案不闪烁...

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

【讨论】：