PDA

View Full Version : [OPEN-1054] Tooltip anchoring problem



draduc
14 Jun 2010, 6:41 AM
Hello,

I have an issue when anchoring a tooltip, i can't seem to get the 'bl-bl' alignment to work.

The code (only relevant code posted):


if(!this.eTip){
this.eTip = new Ext.ToolTip({
tpl:[
'<tpl for=".">',
'<div>{name}:{text}</div>',
'</tpl>'
]
});
}
this.eTip.showBy(this.panel.body,'bl-bl');
this.eTip.update(data.fields);
this.eTip.showBy.defer(100,this.eTip,[this.panel.body,'bl-bl']);


You can see the problem manifest itself in the attached screenshot.

Calling showBy only one time renders the tooltip as seen in the first window. Making a deferred second call to showBy fixes the alignment and displays the tooltip correctly. Is there any way to fix this so that the tooltip will be displayed correctly with only one call?

Thank you!

jsakalos
14 Jun 2010, 11:34 AM
Isn't the tip empty by the first call? If yes, it cannot measure it's size. Try:


this.eTip.update(data.fields);
this.eTip.showBy(this.panel.body,'bl-bl');

draduc
14 Jun 2010, 10:22 PM
Isn't the tip empty by the first call? If yes, it cannot measure it's size. Try:


this.eTip.update(data.fields);
this.eTip.showBy(this.panel.body,'bl-bl');



i changed the code to:



if(!this.eTip){
this.eTip = new Ext.ToolTip({
tpl:[
'<tpl for=".">',
'<div>{name}:{text}</div>',
'</tpl>'
],
data:data.fields
});
}
else {
this.eTip.update(data.fields);
}
this.eTip.showBy(this.panel.body,'bl-bl');


still, it's not working. the problem is that on the first "showBy" call, the tooltip is not rendered. calling "update" before "showBy" causes a JS crash (there's no rendered dom to update). i passed a data set on the tooltip instantiation, still no luck.

i think the problem is in the "showBy" method. what it should do is render the tooltip with visibility hidden, calculate it's height, align it and only then set visibility to visible... i'll give it a try with an override and post the results back here :)

thanks!

draduc
14 Jun 2010, 10:41 PM
I checked the library code for the "showBy" method, it seems that when the tooltip is hidden it has a style property of display set to "none". Because of this, the height of the element cannot be calculated correctly upon method call (element height return 0). I made a small modification to the code, it seems to be working now :)

Original showBy method code:


showBy : function(el, pos){
if(!this.rendered){
this.render(Ext.getBody());
}
this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
}


Modified showBy method code:


showBy : function(el, pos){
if(!this.rendered){
this.render(Ext.getBody());
}
this.el.setStyle({
display:''
});
this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
}


still, it needs some proper testing...just to make sure that everything else is working as it should. it might have been a bug or it might have been a feature :P

thanks!

jsakalos
15 Jun 2010, 12:24 AM
I believe this is bug, therefore, I'm moving this thread to Bugs.

evant
16 Jun 2010, 3:57 AM
I can't confirm this. Whether I delay the call or not, it still shows up as I would expect:



Ext.onReady(function(){
var panel = new Ext.Panel({
width: 400,
height: 400,
renderTo: document.body,
title: 'X'
});
var el = panel.body;
var eTip;
if (!eTip) {
eTip = new Ext.ToolTip({
tpl: ['<tpl for=".">', '<div>{name}:{text}</div>', '</tpl>']
});
}
eTip.showBy(el, 'bl-bl');
eTip.update({
name: 'Foo',
text: 'Bar'
});
//eTip.showBy.defer(100, eTip, [el, 'bl-bl']);
eTip.showBy(el, 'bl-bl');
});

jsakalos
16 Jun 2010, 4:22 AM
You call showBy twice. If you delete 2nd call, after update, then it shows up. However, the "double call" can be used as workaround.