PDA

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



davidbeers
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!

slemmon
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):
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/qtips/qtips.html

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.

davidbeers
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