I recently had a request to help show an approach for creating a custom “speech bubble” tooltip.

Here is a sample that should help demonstrate the approach.

There are docs on creating custom tooltips and that is essentially what my sample is based upon:
http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_1.html

The next challenge was to customize the border. I mimicked what was described in the docs:
http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_1.html
The docs show you how to customize the tooltip border, but since my custom tooltip extends Panel instead, I need to use the skin for the Panel border.
(thus I am using mx.skins.PanelSkin) It is also useful to look at what the parent of that class is doing (mx.skins.halo.HaloBorder).

I basically stole the “tail drawing” bit from the tooltip skin though and just patched it on to the end of the drawBorder method in the PanelSkin.
You may want to make this more robust, but this is just the general approach. (Add logic to determine what side to draw the tail on, what color the tail should be, etc.)

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:
Read the rest of this post»




13 Comments »