PDA

View Full Version : QuickTip positioning broken



Tom23
19 Jan 2011, 2:28 AM
This bug has been around for a long time (at least since Ext 2.2.1)

Testcase:

Ext.QuickTips.init();

Ext.onReady(function () {
new Ext.Viewport({
layout: 'absolute',
items: [{
xtype: 'button',
x: 100, y: 100,
text: 'br-tl',
tooltip: {
text: 'Tooltip top left',
align: 'br-tl'
}
}]
});
});


Expected result:
Quicktip shows at top left of the button

Experienced result:
QuickTip covers up the button

Debugging already done:
The reason for this behaviour is that the QuickTip is being rendered with zero-size, thus it is not possible to determine its dimensions in order to move it to the correct position.



// QuickTip.js
showAt :
[...]
}else if(t.align){ // TODO: this doesn't seem to work consistently
xy = this.el.getAlignToXY(t.el, t.align); // fails
this.constrainPosition = false;
}else{
this.constrainPosition = true;
}


Proposed fix:
Render off-screen, then determine dimensions


}else if(t.align){
// pre-show it off screen so that the el will have dimensions
// for positioning calcs when getting xy next
Ext.QuickTip.superclass.showAt.call(this, -1000, -1000);
xy = this.el.getAlignToXY(t.el, t.align);
this.constrainPosition = false;
}else{

Condor
19 Jan 2011, 2:38 AM
This has been discussed before.

Using a Tooltip with an anchor complicates the matter even more, because it also has to take the extra 'triangle' into account.

Tooltip needs a good refactor, not only to make it show at the desired location, but also to not make it fire the show event twice.

jratcliff
24 Feb 2011, 7:06 PM
There is a bug/typo with Ext.ToolTip's adjustPosition method so add this override and see if that fixes the issue for you.




Ext.ToolTip.override({

adjustPosition : function(x, y){
if(this.constrainPosition){
var ay = this.targetXY[1], h = this.getSize().height;
if(y <= ay && (y+h) >= ay){
y = ay-h-5;
}
}
return {x : x, y: y};
}

});

Tom23
27 Feb 2011, 2:38 AM
Thanks, but I'm afraid it doesn't work:
http://jsfiddle.net/AnpYJ/

Please compare to the desired behaviour (using the abovementioned hack):
http://jsfiddle.net/xkpw8/

steffenk
27 Feb 2011, 4:57 AM
by reading, the if clause simply is wrong.