关于ExtJs中tooltip的鼠标事件

Posted 2023-05-03

现在已经实现了鼠标移动到一个图片上面显示有关的信息，离开图片就不显示信息。但是我想进一步。
实现：
当鼠标移动到信息框的时候，信息框不要消失。当鼠标移出信息框的时候，信息框才消失（当然移动到图片除外）。
Ext.create('Ext.tip.ToolTip',
autoShow:true,
autoDestroy:true,
trackMouse: true, // 跟随鼠标移动
target: '' + i.id + '' +'heat',
layout: 'fit',
detachOnRemove:false,
// closable: true,
// closeAction:'destroy',
draggable:true,
// autoHide: false,
dismissDelay:5000,
items:[

xtype:'textfield',
id:'textfieldToolTip',
disabled:true,
fieldLabel:'热表数量',
labelWidth:60,
width:100
,

xtype:'grid',
id:'gridgg',
autoShow:false,
autoDestroy:false,
hideMode:'offsets',
margin:'10 0 0 0',
height:250,
width:250,
store: store,
id:'gridgg',
columns: [
text: '热表编号', dataIndex:'calIntakeId',
text: '累计热量', dataIndex:'sumHeat'
],
forceFit: true

]
);
这我的部分关键代码。
我现在的思路是想获取鼠标移动的事件，判断鼠标是否还是信息框里，但是查了好多貌似没这个事件。
问问高手是否有别的思路或者是别的方法。谢谢

您好，希望以下回答能帮助您
Extjs中 有一个 "mouseenter"事件 你可以试试
如您还有疑问可继续追问。 参考技术A Extjs中 有一个 "mouseenter"事件 你可以试试追问

你用的是什么版本的？我用的4.2，貌似没有这个事件

追答

你看这个事件是不是你想要的 鼠标进入事件

追问

谢谢，我被你启发了下，被我解决了，我把他的show事件单独触发了下。

本回答被提问者采纳 参考技术B 是不是应该加个监听啊lister，我只想到这了。具体的你再看看监听事件吧。

在页面加载按钮上触发鼠标悬停事件，extjs3

【中文标题】在页面加载按钮上触发鼠标悬停事件，extjs3

【英文标题】：Trigger mouseover event on button on page load, extjs3

【发布时间】：2018-03-20 09:33:54

【问题描述】：

我有一个button 和tooltip，我想在页面加载时显示tooltip 几秒钟。使用EXTJS 3

我可以在页面加载时触发鼠标悬停事件吗？或者我可以有任何其他解决方案吗？

【问题讨论】：

自从我搞砸了 ExtJS 3 以来已经有一段时间了，但我想你可以在按钮上放置一个后渲染监听器，当它触发时你可以显示工具顶部并执行 setTimeout 以便在之后隐藏它几秒钟。我认为您会获得工具提示并明确显示/隐藏它，而不是尝试模拟鼠标悬停事件。

【参考方案1】：

在render 事件上尝试使用以下代码 sn-p：

var tip = new Ext.ToolTip(
    target: c.getEl(),
    html: 'Tooltip content'
);
tip.showBy(this.getEl());

Working example