ExtJS Tooltip鼠标移出时未隐藏问题求助及代码修正建议

我来帮你解决这个ExtJS Tooltip鼠标移出无法销毁/隐藏的问题，大概率是手动创建销毁的逻辑没处理到位，或者没用到框架自带的便捷配置，给你几个靠谱的修正方案：

推荐方案：用ExtJS内置Tooltip配置（最省心） #

其实ExtJS本身就自带了完善的Tooltip管理逻辑，完全不用手动在mouseover/mouseout里折腾创建销毁，直接给目标组件配置tooltip属性就行，框架会自动帮你处理显示隐藏：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 100,
    title: '测试面板',
    items: [{
        xtype: 'button',
        text: '悬停查看提示',
        tooltip: {
            text: '这是框架自动管理的Tooltip',
            trackMouse: true // 可选：跟踪鼠标移动，鼠标离开自动隐藏
        }
    }]
});

如果是给DOM元素绑定，也可以直接创建Tooltip实例并指定target，框架会自动关联事件：

Ext.create('Ext.tip.ToolTip', {
    target: 'your-dom-element-id',
    html: '绑定到DOM元素的Tooltip',
    autoHide: true // 默认就是true，鼠标移出目标自动隐藏
});

手动管理Tooltip的正确姿势（如果必须手动创建） #

如果你因为特殊需求必须手动在mouseover里创建Tooltip，那一定要确保在鼠标移出时能正确访问到Tooltip实例并执行隐藏/销毁操作，还要注意事件的选择（mouseleave比mouseout更可靠，不会因为子元素冒泡触发）：

// 声明全局或可访问的Tooltip实例变量
let customTooltip;

// 绑定鼠标移入事件
Ext.get('target-element').on('mouseover', function(e) {
    // 创建Tooltip并显示
    customTooltip = Ext.create('Ext.tip.ToolTip', {
        target: e.getTarget(),
        html: '手动创建的提示框',
        anchor: 'top'
    });
    customTooltip.show();
});

// 绑定鼠标离开事件（用mouseleave避免子元素干扰）
Ext.get('target-element').on('mouseleave', function() {
    if (customTooltip) {
        customTooltip.hide(); // 先隐藏
        customTooltip.destroy(); // 销毁实例，避免内存泄漏
        customTooltip = null; // 清空引用，防止重复操作
    }
});

排查常见配置坑 #

如果还是不行，检查下Tooltip的配置项：

• 有没有设置autoHide: false？这个属性默认是true，如果手动改成false，Tooltip不会自动隐藏，得改回true
• 有没有设置closable: true但没处理关闭逻辑？如果不需要关闭按钮，直接去掉这个配置

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