Bootstrap Tooltip聚焦内容时不消失仅外部失焦才隐藏的实现问题

数据老陈

2026-10-5

问题根因

当前配置中trigger设置为focus hover，Bootstrap默认不会将Tooltip内容区域判定为交互有效范围，当焦点或鼠标从触发元素移到Tooltip内容区时，会被判定为离开触发元素，触发自动隐藏逻辑。

调整步骤

1. 修改初始化配置

将触发方式改为手动控制，新增短延迟避免鼠标移动过程中的误隐藏，修改后初始化代码如下：

$('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    boundary: 'window',
    trigger: 'manual', // 切换为手动触发，自主控制显隐逻辑
    html: true,
    delay: {show: 100, hide: 100},
    template:   
     '<div class="tooltip bs-tooltip-top" role="tooltip">'+
      '<div class="arrow"></div>'+
      '<div class="tooltip-inner">'+
      '</div>'+
    '</div>'
})

2. 绑定自定义显隐事件

通过自定义事件监听，仅当鼠标/焦点既不在触发元素、也不在Tooltip内容区时，才执行隐藏：

let hideTimer;
const $tooltipTrigger = $('[data-toggle="tooltip"]');
const tooltipClass = '.tooltip';

// 触发元素移入/聚焦时显示Tooltip
$tooltipTrigger.on('mouseenter focus', function() {
    clearTimeout(hideTimer);
    $(this).tooltip('show');
});

// 触发元素移出/失焦时延迟判定是否隐藏
$tooltipTrigger.on('mouseleave blur', function() {
    const $currentTrigger = $(this);
    hideTimer = setTimeout(function() {
        // 鼠标不在Tooltip上才执行隐藏
        if (!$(tooltipClass).is(':hover')) {
            $currentTrigger.tooltip('hide');
        }
    }, 150);
});

// 鼠标移入Tooltip时取消隐藏
$(document).on('mouseenter', tooltipClass, function() {
    clearTimeout(hideTimer);
});

// 鼠标移出Tooltip时执行隐藏
$(document).on('mouseleave', tooltipClass, function() {
    hideTimer = setTimeout(function() {
        $tooltipTrigger.tooltip('hide');
    }, 150);
});