Wednesday, March 31, 2010

Tree Item ToolTips

Here is how you can set custom tooltips in Flex 3 on each item in a Tree.

First, you have to set the following properties on the Tree:
  • showDataTips="true" - causes tooltips to be shown
  • dataTipFunction="myDataTipFunction" - sets the function which returns the tooltip for each item
  • itemRenderer="ToolTipItemRenderer" - tells the tree to use our custom renderer (which extends the default TreeItemRenderer)
The itemRenderer isn't necessary unless you want to have control over where the tooltip is positioned (see below).

Also note that if you set the dataTipField property on the tree instead of the dataTipFunction then your tooltips will only show up when the tree item isn't fully visible due to scrollbars. By setting the dataTipFunction it forces the tooltips to always show when the mouse is over the tree node.

Now, on to the next problem. By using the method above the tooltips are always displayed. But the default position for the tooltip is right on top of the tree node, which is annoying. So this is why we use our own custom item renderer so that we can position the tooltip below or above the node (or anywhere you want it).

Here is an example with View Source enabled:

9 comments:

Dan Nelson said...

Thanks for posting this. It was exactly what I needed to do!

Ernesto Giron said...

Excellent!... great job. Searching around I found this link http://ifeedme.com/blog/?p=14.

May be it helps to inspire others.

Thx.

DaddyDog said...

Saved my bacon, thanks for posting, vey nice.

Jach said...

You rule, thanks a ton.

Kavita said...

This article really helped. Thanks for posting it...

Barry said...

Works like a charm, thanks!

It's sad how many times I've gone to the Adobe Flex documentation and found either misleading, incorrect, or no information on things that should be simple, like tooltips.

Rick said...

Thanks, exactly what I am looking for!
-Rick

Anonymous said...

Perfect! Thanks!

Leonardo Molina said...

Also, if the text we want to show is the same as labelField, we can set the dataTipLabel property. This way the tooltip only appears when the label is too long

Example:
< mx:Tree id="myTree" labelField="name" showDataTips="true" dataTipField="name" />