CODEWITHSUNDEEP
extjsextjs4.2
So4ne
So4ne

Reputation: 1182

Adding tooltip to an image

Can't understand why my code isn't working, is there any way to display a tooltip on an image with 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'
});

My image is in the dockedItems of a treepanel like that :

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

Upvotes: 2

Views: 7316

Answers (2)

Akatum
Akatum

Reputation: 4016

Problem can be that your image component is created but not rendered into page content when you are trying to add tooltip to image component's element.

Try to add tooltip after image component is rendered:

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'
                });
            }
        }
});

Fiddle with example: https://fiddle.sencha.com/#fiddle/6ta

Upvotes: 7

weslito
weslito

Reputation: 76

I don't have experience with extjs but I tend to delegate the tooltip problem to css. As a rule of thumb when I can avoid unnecessary javascript I do it.

With pseudo element you can simply do this

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

For this you need you img markup (generated by extjs) to look like this

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

Bonus, you can then very easily style your tooltip and even animate them.

I hope this help.

Upvotes: 2

Related Questions