ExtJS3：页面加载时触发按钮鼠标悬停事件以显示Tooltip几秒

当然可以实现！在ExtJS 3里，你有两种比较靠谱的方式来达成这个需求，我给你详细拆解一下：

方法一：模拟鼠标悬停事件 #

你可以直接触发按钮元素的mouseover事件来唤起Tooltip，之后再触发mouseout来隐藏它。不过要注意得等组件完全渲染完成后再操作，所以最好加个小延迟确保元素已经存在：

// 先定义你的按钮和Tooltip
var myButton = new Ext.Button({
    renderTo: Ext.getBody(),
    text: '操作按钮',
    tooltip: {
        text: '这是页面加载时自动显示的提示',
        trackMouse: false // 关闭鼠标追踪，避免自动隐藏逻辑被干扰
    }
});

// 页面就绪后执行
Ext.onReady(function() {
    // 延迟100ms确保组件渲染完成
    Ext.defer(function() {
        // 触发鼠标悬停事件，显示Tooltip
        myButton.el.fireEvent('mouseover');
        
        // 3秒后触发鼠标移出事件，隐藏Tooltip
        Ext.defer(function() {
            myButton.el.fireEvent('mouseout');
        }, 3000);
    }, 100);
});

方法二：直接控制Tooltip实例（更推荐） #

这种方式更可控，不需要依赖事件触发，直接获取Tooltip实例并调用它的show和hide方法。因为ExtJS 3的Tooltip可能是懒加载的，所以可以提前初始化Tooltip实例，或者确保在调用时它已经被创建：

方式A：提前初始化Tooltip #

// 先创建Tooltip实例
var autoShowTooltip = new Ext.Tooltip({
    text: '页面加载自动显示的提示',
    trackMouse: false,
    target: 'my-action-btn' // 绑定到按钮的ID
});

// 定义按钮
var myButton = new Ext.Button({
    id: 'my-action-btn',
    renderTo: Ext.getBody(),
    text: '操作按钮',
    tooltip: autoShowTooltip
});

// 页面就绪后显示
Ext.onReady(function() {
    Ext.defer(function() {
        // 直接显示Tooltip，指定绑定的按钮元素
        autoShowTooltip.show(Ext.get('my-action-btn'));
        
        // 3秒后隐藏
        Ext.defer(function() {
            autoShowTooltip.hide();
        }, 3000);
    }, 100);
});

方式B：从按钮获取Tooltip实例 #

如果你的Tooltip是通过按钮配置自动创建的，可以用getTooltip()方法获取实例：

var myButton = new Ext.Button({
    renderTo: Ext.getBody(),
    text: '操作按钮',
    tooltip: {
        text: '页面加载自动显示的提示',
        trackMouse: false
    }
});

Ext.onReady(function() {
    Ext.defer(function() {
        var tooltip = myButton.getTooltip();
        if (tooltip) {
            // 显示在按钮元素上
            tooltip.show(myButton.el);
            // 3秒后隐藏
            Ext.defer(function() {
                tooltip.hide();
            }, 3000);
        }
    }, 100);
});

注意事项 #

• 一定要加小延迟（比如100ms），确保页面和组件完全渲染完成，避免找不到元素或者Tooltip未初始化的问题；
• 把trackMouse设为false可以避免Tooltip在鼠标移动时自动隐藏，确保它能稳定显示指定的时长；
• 推荐用第二种方法，因为直接操作Tooltip实例比模拟事件更可靠，不容易受组件状态或事件冒泡的影响。

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