Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/400.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 引导工具提示隐藏选择器/切换元素_Javascript_Css_Twitter Bootstrap - Fatal编程技术网

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

Javascript 引导工具提示隐藏选择器/切换元素,javascript,css,twitter-bootstrap,Javascript,Css,Twitter Bootstrap,我使用的是Bootstrap 2.3.2。我的工具提示会按预期显示,但当鼠标悬停在触发元素之外时,工具提示和触发元素都会隐藏。触发元素应用了一种内联样式display:none 诊断为什么会发生这种情况的最佳方法是什么?我担心这可能是另一个JS库冲突,但我不确定如何捕获将display:none添加到触发元素的事件。我实际上从Prototype和Bootstrap 2.3之间的交互中发现这是一个名称空间冲突 最好的办法是现在在bootstrap.js中注释掉这行元素.trigger(e),或者

我使用的是Bootstrap 2.3.2。我的工具提示会按预期显示,但当鼠标悬停在触发元素之外时,工具提示和触发元素都会隐藏。触发元素应用了一种内联样式
display:none


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

我实际上从Prototype和Bootstrap 2.3之间的交互中发现这是一个名称空间冲突

最好的办法是现在在bootstrap.js中注释掉这行
元素.trigger(e)
,或者在bootstrap.js上不做任何更改的情况下使用3.0 WIP.

解决方案

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">info</span>

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

此解决方案不会闪烁

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

为谷歌人;对我来说,所有的答案都不起作用。因此,这里是(不是最好的)但非常简单的解决方法:

将此添加到css中:

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

你能提供一个链接到你的问题所在的网站吗?这是一个很好的方法,但是当元素在你的代码中隐藏并再次显示时,你对元素的闪烁有什么建议?请检查我下面的答案以获得非闪烁的解决方案
[data-toggle="tooltip"] {
  display: initial !important;
}