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

Question

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

虽然我遇到的问题是，当有人悬停在其他工具提示上时如何隐藏第一个工具提示。

我得到此代码以在悬停时显示工具提示

$(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。