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

Answer 2

我没有使用extjs的经验，但我倾向于将工具提示问题委托给css。根据经验，我可以避免不必要的javascript。

使用伪元素你可以简单地执行此操作

.img_tooltip:hover:after {
     content: attr(alt);
}

为此你需要img标记（由extjs生成）看起来像这样

<img src="img/ampoule.png" alt="text of your tooltip" class="img_tooltip" />

奖励，您可以非常轻松地设置工具提示的样式，甚至可以为它们制作动画。

我希望这有帮助。

将工具提示添加到图像

2 个答案: