Bootstrap Tooltip 无法自动销毁问题求助

这个场景我之前也遇到过——浏览器切换标签页时，Bootstrap的Tooltip没法感知鼠标已经离开元素的状态，所以返回原页面后tooltip就一直挂着。结合你用的jQuery 1.10和Bootstrap 3，给你几个实用的解决思路：

方法1：监听窗口焦点事件全局隐藏Tooltip #

当用户从新窗口返回时，原页面会触发focus事件，我们可以利用这个时机统一隐藏所有Tooltip：

// 确保代码在jQuery和Bootstrap JS加载后执行
$(function() {
    // 初始化所有Tooltip
    $('[data-toggle="tooltip"]').tooltip();
    
    // 页面获得焦点时隐藏所有Tooltip
    $(window).on('focus', function() {
        $('[data-toggle="tooltip"]').tooltip('hide');
    });
});

这个方法简单直接，不管之前哪个Tooltip显示着，返回页面后都会自动消失，下次hover元素时会正常触发显示逻辑。

方法2：针对点击的链接单独处理 #

如果不想全局操作，也可以在点击链接打开新窗口前，手动隐藏当前对应的Tooltip：

$(function() {
    $('[data-toggle="tooltip"]').tooltip();
    
    // 点击链接时先隐藏父元素的Tooltip
    $('#myId').on('click', function() {
        $(this).closest('[data-toggle="tooltip"]').tooltip('hide');
    });
});

这种方式更精准，只针对你点击的这个Tooltip容器做处理，不会影响页面上其他的Tooltip组件。

方法3：优化Tooltip触发逻辑（可选增强） #

可以给Tooltip添加focus触发方式，配合上面的方法进一步避免状态异常。先修改你的HTML：

<div class="myClass" data-toggle="tooltip" data-placement="bottom" data-delay='{"show":"500"}' rel="tooltip" title="My Text" data-trigger="hover focus">
  <a id="myId" target="_blank" href="#"><img class="anotherClass" src="somelogo.png" /> <div class="viewText">View</div></a>
</div>

添加data-trigger="hover focus"后，Tooltip会在元素获得焦点或hover时显示，失去焦点时自动隐藏，再结合窗口焦点事件，能覆盖更多边界场景。

测试步骤 #

1. 把代码加到页面中（注意放在jQuery和Bootstrap JS之后）
2. Hover元素，确认Tooltip正常显示
3. 点击链接打开新窗口
4. 返回原页面，Tooltip应该自动消失
5. 再次hover元素，Tooltip能正常触发显示

内容的提问来源于stack exchange，提问作者surya