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)
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:
Thanks for posting this. It was exactly what I needed to do!
Excellent!... great job. Searching around I found this link http://ifeedme.com/blog/?p=14.
May be it helps to inspire others.
Thx.
Saved my bacon, thanks for posting, vey nice.
You rule, thanks a ton.
This article really helped. Thanks for posting it...
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.
Thanks, exactly what I am looking for!
-Rick
Perfect! Thanks!
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" />
Post a Comment