View Full Version : Anchor image for Ext.tip.ToolTip

27 Jun 2013, 12:19 PM
So, I have requirements to create a custom styled tooltip and the image for the x-tip-anchor element needs to be much bigger. I was able to get my new arrows put in the correct places using the x-tip-anchor-{pos} classes but the tooltip itself hasn't changed its distance from the target even though my arrows are 5 times bigger.

I've looked through all of the configurations that I could find but I'm missing something so I have a couple of questions.

Is there a way to tell the tooltip to center itself on the anchor? Right now the anchor is positioned on the far left of the tooltip itself vs centered like I want.

Is there a way to change the "targetOffset" to move the tooltip out 10px so my big arrow doesn't overlap my target element?

Here's a JSFiddle (http://jsfiddle.net/bconoly/x5juW/3/) to help out

28 Jun 2013, 4:44 AM
Regarding the targetOffset part of your question, you can use the margin property of the Tooltip config to move the tooltip around.

28 Jun 2013, 9:19 AM
Thanks, that ended up working great in the JSFiddle but for some reason in my application the tooltip was taking the margin into account when determining its positioning. I ended up using mouseOffset to force it to push out but the biggest issue there is that I have to use the anchor value to determine what the offset should be...oh well, it'll do for now.