Tuesday, March 23, 2010

Alternate Tooltip for <mx:List /> items

I spent sometime trying to understand ways to add tooltips for items within a <mx:List ..> component. As I naively used the dataTipFunction(), it was pretty evident (at least in my case) that I needed something whereby I can have more control, a more robust solution than the out-of-the-box solution. This is when I decided to use the itemRollOver and itemRollOut events and corresponding handlers.
According to the Flex 3.5 SDK, the List control:
"...displays a vertical list of items. Its functionality is very similar to that of the SELECT form element in HTML..." 
As with most things in Flex, the List control extends a base class where a lot of functionality is already defined. In this case, it's the ListBase control. This control, has a property that can point to a Function. This is the dataTipFunction() which enables the tooltip feature of each item in the list. The fundamental problem with this approach is that the generated IToolTip containing the text can not be properly manipulated (say to modify it's location, color, rendering component, etc). In my particular case, I went for a different approach.

Instead, I used the itemRollOver and itemRollOut events to properly operate on a customed IToolTip. Using the ToolTipManager.createToolTip() I was able to not only create my custom tool tip, but also put a position to it so it will not block what I'm mousing over.  Now, yes, this was more work as I had to manage the livecycle of the IToolTip instance (only a few lines of code), but I was able to do so much with it (e.g. delay the showing of the tooltip).

No comments: