PDA

View Full Version : Align tooltip to center of button



jej2003
12 Jul 2012, 1:40 PM
I am trying to align a tooltip to the center of a button and am running into issues. I am currently doing this



Ext.create('Ext.tip.ToolTip',{ target: btn.el.id,
html: 'Test',
anchorToTarget : true,
defaultAlign: 'c'
});


but this then gives me errors

TypeError: 'undefined' is not an object (evaluating 'me.anchorEl.hide')

If I do the following it gets me closer, but I can't seem to center the tooltip on the button

Ext.create('Ext.tip.ToolTip',{ target: btn.el.id,
anchor: 'top',
mouseOffset:[0,0],
anchorToTarget: true,
width:100,
html: 'Test2'
});

Any ideas how to go about doing this would really be appreciated.

sword-it
12 Jul 2012, 10:23 PM
Hi jej2003,
I think you want to center the tooltip text with the tooltip width. Review the following code:




Ext.create('Ext.tip.ToolTip',{
target: btn.el.id,
anchor: 'top',
anchorToTarget: true,
width: 100,
style: 'text-align:center', // just need to add the this line.
html: 'Test2'
});

jej2003
13 Jul 2012, 4:05 AM
I do eventually want to do that as well, but right now this code makes the left of the tooltip and the left of the button line up. I really want the entire tooltip centered. I've attached an img showing what I am trying to do.

jej2003
13 Jul 2012, 6:05 AM
So I ended up with this which works for my use case.


Ext.create('Ext.tip.ToolTip',{
target: btn.el.id,
anchor: 'top',
mouseOffset:[0,0],
dismissDelay : 0,
shadow : false,
anchorToTarget: true,
width:50,
html: 'Sort',
style: 'text-align:center',
getTargetXY: function() {
var x = btn.el.getXY()[0];
var y = btn.el.getXY()[1];
return [x - (this.width - btn.getWidth())/2, btn.getHeight() + y + 5];
}
});