将鼠标悬停在 extjs 工具栏文本中的新项目上时如何销毁以前的工具提示

Question

我有一个工具栏，其中有显示文档标题的文本项。工具栏有一个下一个和上一个按钮，点击任何按钮新文档加载，加载新标题到文档。我想创建一个工具提示以在鼠标悬停时显示标题。我能够创建一个，但有一个问题，我以前的工具提示没有被破坏。

 Mycode 

  {
                xtype   : 'tbtext',
                id      : 'srcHdr',
                style   : {
                    'width' : '400px',
                    'overflow' : 'hidden',
                    'text-overflow' : 'ellipsis !important'
                },
                reference:'headerTitle',
                html     : ''
            },

控制器

    var srchHeaderTitle = this.lookupReference('headerTitle');
    srchHeaderTitle.update('<b>'
                    + unescape(title.replace('%2B', '+')
                    + '</b>'));

    var tip=Ext.create('Ext.tip.ToolTip', {
           target: 'srcHdr',
           autoHide:true,
           html: srchHeaderTitle
        });

Answer 1

要为工具提示动态设置 html，请在目标组件渲染器上创建它，然后在更新工具提示的工具提示上设置显示前侦听器。

xtype: 'tbtext',
html: 'Hover to see tooltip',
listeners: {
    'render': function() {
        Ext.create({
            xtype: 'tooltip',
            target: this.getEl(),
            listeners: {
                scope: this,
                beforeshow: function(tip) {
                    tip.setHtml('Tbtext text: ' + this.getEl().getHtml());
                }
            }
        });
    }
}

这里是 fiddle.

将鼠标悬停在 extjs 工具栏文本中的新项目上时如何销毁以前的工具提示

How to destroy previous tooltip when hovering over a new item in extjs toolbar text

extjs

tooltip