View Full Version : ToolTip Rendering problem

26 Nov 2012, 5:11 AM
Hello all,

i am facing a problem in Ext.tip.ToolTip, when i am adding an html code to the html property, which contains an image and text, the problem is the text rendered before the image get load. how i can load the image before showing it? in order to get a good tooltip?


26 Nov 2012, 6:34 AM
Could you show us some code please? ^^

26 Nov 2012, 7:12 AM
this.tooltip = Ext.create('Ext.tip.ToolTip', {
target : 'objOne',
html : ''

then i have listener, for mouse over like this:

el.on('mousemove', function(a, t, eOpts) {
this.getTooltip().update("<table><tr><td><img align='left' style='max-height:150px;max-width:300px' src='imageSource'</td></tr><tr><td align='left'><hr></hr></td></tr></table><table><tr><td align='left'>Data</td></tr><tr><td align='left'> data</td></tr><tr><td align='left'><hr></hr></td></tr></table>");



the problem it take text rendred before the image get load, and taht make look ugly.....

26 Nov 2012, 7:22 AM
So you don't work with the extjs MVC structure?

26 Nov 2012, 7:47 AM
no Not in this case?, it is a special case in my application, but it is not the problem, i am sure of that.

26 Nov 2012, 8:31 AM
If yoour code is in a class you could preload the images by using the Ext.create('Ext.Img', .... in the constructor and saving the objects in an array into the class. You can show them via this.images[0].show(); for example.

But this means you can't use your html any more. You would have to use the item property. I hope you get what I mean xD

If not, I can show you an example...

There's also another method using pure JavaScript:

var image = new Image(100,100) //100, 100 is the size
image.src ='path/to/your/image.png';

26 Nov 2012, 8:58 AM
the problem i can not do it like this all the html code i get it from the back end, so i think i need to use pure javascript.

26 Nov 2012, 9:16 AM
Yap, I would make a store for it, which holds all the URIs for the images =)