将工具提示添加到图像

Question

无法理解为什么我的代码不起作用,有没有办法在带有extjs的图像上显示工具提示？

var img = Ext.create('Ext.Img', {
        src : 'img/ampoule.png',
        width : 30
});

var tip = Ext.create('Ext.tip.ToolTip', {
    target: img.getEl(),
    html: 'tooltip'
});

我的图像位于treepanel的dockedItems中:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        fieldLabel: 'Search',
        /*****code code code everywhere*****/
        }
    ,
    img
   ]
}]

Answer 1

当您尝试将工具提示添加到图像组件的元素时,问题可能是您的图像组件已创建但未呈现为页面内容.

尝试在渲染图像组件后添加工具提示:

var img = Ext.create('Ext.Img', {
        src: 'http://www.sencha.com/img/v2/logo.png',
        width: 300,
        renderTo: Ext.getBody(),
        listeners: {
            afterrender: function(c) {
                Ext.create('Ext.tip.ToolTip', {
                    target: c.getEl(),
                    html: 'tooltip'
                });
            }
        }
});

举例:https://fiddle.sencha.com/#fiddle/6ta