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: