View Full Version : Customizing the "beak" on a callout tooltip

27 Jun 2013, 3:27 PM
I would like to style my callout tooltips and was trying to determine what resource produces the beak on the tooltip in 4.1.1. Older versions of ExtJS seem to use a background image sprite, but I couldn't find any such sprite or see it loading in Firebug. So, what is the trick? And is there a way I can "tweak the beak" with CSS?

Thanks in advance!

30 Jun 2013, 11:09 PM
Have you inspected the CSS for the callout? You can see an example of the callout here (the "anchor right, rich content" button):

Since on that example the autoHide config is false you have plenty of time to tinker with the CSS inside of your dev tools to see how it's constructed.

1 Jul 2013, 9:58 AM
Ah, I get it. Ext is using an ingenious CSS trick that makes a thick border on one side of a div with 0px height and width, and a transparent border on the other three sides. Because of the beveling of the one-sided border it renders a triangle pointing to the center of the heightless/widthless div. Stared at that CSS for a while then tinkered as you suggested before I finally figured out how it could generate a triangle. I just didn't believe it!

More info on the technique here for those that are interested: http://www.dailycoding.com/Posts/purely_css_callouts.aspx