View Full Version : QuickTip positioning broken

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



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;
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;

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.

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.


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


27 Feb 2011, 2:38 AM
Thanks, but I'm afraid it doesn't work:

Please compare to the desired behaviour (using the abovementioned hack):

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