Twitter Bootstrap 工具提示：鼠标按下时闪烁

Posted 2023-05-08

【中文标题】Twitter Bootstrap 工具提示：鼠标按下时闪烁

【英文标题】：Twitter Bootstrap Tooltip: flickers on mouse down

【发布时间】：2019-04-09 17:01:57

【问题描述】：

我正在处理引导工具提示的一些奇怪行为。

ASP.Net 和 Bootstrap 的版本：

ASP.Net 4.5

Boostrap 3.0.0

场景：

我正在开发我的 webapp，我需要在按钮上使用 Bootstrap 工具提示。一切正常，但我觉得当我的鼠标按下事件被触发时，工具提示正在闪烁。这是gif：

我的问题是如何使用 jquery 或任何 css 提示在我的 ASP.Net webapp 中防止鼠标按下事件中的工具提示闪烁？

我之前尝试过的是

Github ref#1 Github ref#2

.tooltip pointer-events: none; container="body

但它们都不适用于我的情况。此外，我在这里分享了我的 Bundle.config 文件，您可以在其中看到我的引导程序和自定义 css 文件的对齐方式。

<bundles version="1.0">
    <styleBundle path="~/Content/css">
        <include path="~/Content/bootstrap.css" />
        <include path="~/Content/chosen.css" />
        <include path="~/Content/Site.css" />
        <include path="~/Content/font-awesome.css" />
        <include path="~/Content/AutoComplete.css" />
        <include path="~/Content/GridView.css" />
        <include path="~/Content/custom.css" />
    </styleBundle>
</bundles>

在我的网站母版页中，我将 jquery 放在页面末尾：

$('[data-toggle="tooltip"]').tooltip( container: 'body' );

并将这个 css 放入我的自定义 css 文件中

.tooltip pointer-events: none !important; .popover pointer-events: none !important;

现在请告诉我我做错了什么或者什么是防止鼠标按下事件闪烁的正确方法。

【参考方案1】：

我在 Visual Studio ASP.NET 应用程序中的 Bootstrap 有类似的奇怪行为。如果 Bootstrap 是作为项目的一部分安装的（可能是），请尝试删除 NuGet 包并重新安装它。在您这样做的同时，我建议将 Bootstrap 升级到 3.3.7 或更高版本。

【讨论】：

好的，我已将引导程序版本 3.0.0 升级到 3.3.7，但问题仍然存在。您解决此问题的引导程序版本是什么？

除非您正在寻找向后浏览器兼容性，否则请升级到 4.1 版。您是否确保卸载 NuGet 包然后重新安装，而不是升级？此外，请确保在引导升级之间清除浏览器缓存。

【参考方案2】：

This is resolved from here

我将下面的代码放在我的母版页中，这解决了我的问题。

$('body').tooltip(
    selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
    trigger: 'hover',
    container: 'body'
).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () 
    $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
);