悬停在另一个工具提示上时取消隐藏工具提示

Question

我收到一个 Jquery 查询。对于这里的某些 jquery 专家来说，这可能非常简单。所以我在左边有这些服务列表，在右边有一个工具提示图标。悬停时，它会显示与特定服务相关的信息。我设法从另一个 Whosebug post 获得了工具提示。但我的客户希望第一个工具提示悬停在页面加载时。我也设法从 Whosebug 获得了它。

虽然我卡在了哪里，但是当有人将鼠标悬停在其他工具提示上时如何隐藏第一个工具提示。

我得到这段代码可以在悬停时显示工具提示

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

然后我得到这段代码，在页面加载时显示第一个

$(document).ready(function(){
    $('[data-toggle=tooltip-active]').tooltip({trigger: 'manual'}).tooltip('show');
});

请帮忙。

Answer 1

尝试在 mouseenter 上销毁工具提示并在其他工具提示的 mouseleave 事件上重新启用它：

jQuery(function($) {

    $('[data-toggle=tooltip]').hover(function() {
        $('[data-toggle=tooltip-active]').tooltip('destroy'); 
    }, function() {
        $('[data-toggle=tooltip-active]').tooltip({trigger: 'hover'}); 
    });

});

假设您正在使用 Bootstrap tooltip。

悬停在另一个工具提示上时取消隐藏工具提示

Unhide a tooltip when hovering on another one

css

jquery

tooltip

hover