Custom Flex ToolTips made easy with CustomToolTip

Posted At : February 26, 2008 7:30 AM | Posted By : Joe Rinehart
Related Categories: Flex

Over the past year, I've spent a good deal of my time reconciling what designers create with what Flex provides. One of the items I run into most frequently is the need for a seriously custom tooltip: images, formatted fonts, etc.

Until today, my approach matched many others, handling the toolTipCreate event and setting the tooltip to use manually. This got a bit repetitive, so I've wrapped up the logic in a CustomToolTip class (attached to this blog entry, download it here) that makes it a declarative process.

You simply state the component creating the tooltip (the "source") and what class to use (not instance, but class!) as a ToolTip (the "renderer"):

<tooltip:CustomToolTip source="{someButton}" renderer="{com.myapp.SomeToolTip}" />

<mx:Button id="someButton" label="Some Button with a Custom Tooltip" toolTip="someTooltipText" />

When the button is moused over, a new instance of com.myapp.SomeToolTip will be created.

If your renderer class implements ICustomToolTip (in the attached .zip), it'll have the source's instance set into its "source" property. This allows you to place a custom tooltip on something like an itemRenderer and access its underlying "data" property.

Comments (5) |

Print |

Send |

Download |

del.icio.us |

Digg It! |

Linking Blogs | 727 Views

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment]

Nice work - I can't wait to try this out!

# Posted By Rachel Maxim | 2/26/08 9:56 AM

Thanks Rachel....I almost want to rename it CustomToolTipHelper, because stating that it is the tooltip is a bit misleading.

Let me know if it gives you any grief. As it's an AS3 class, you need to put the CustomToolTip tag before visual children, in the same place you'd put Validators, etc.

# Posted By Joe Rinehart | 2/26/08 10:19 AM

Not sure what if i set it up wrong, but I can't get your example to create an example of my custom class. All that happens is that i get the tooltip text that you had placed on your example: "someTooltipText". I dropped all your code in. Any ideas why it might not create an instance of the class i'm passing in?

# Posted By Brian Holmes | 2/26/08 11:48 AM

Ah, you still have to implement IToolTip in your custom tool tip.

# Posted By Brian Holmes | 2/26/08 12:01 PM

Thanks for the great work. However, I'm having an issue using your sample. I must be missing something simple. No matter what I do, I get the following error: "Could not resolve <tooltip:CustomToolTip> to a component implementation."

I've tried put an import com.firemoss.controls.tooltip in my script, and I have xnlns:tooltip="com.firemoss.controls.tooltip" in my root level tag. What am I missing?

Thanks!

# Posted By Demian | 3/3/08 4:19 PM

[Add Comment]