Showing list item tooltips in flex

Question

I have a list of objects containing an icon, a label, and a tooltip. I want to show only the icon and the label. The tooltips should be visible on mouse over an item.

Is there a way i can achieve this without writing my own mouse-over/out functions?

(Please notice that dataTips are a different thing as they are displayed only when the label is cut)

Answer 1

The easiest way to display tooltips over items of the List is to provide dataTipField or dataTipFunction property but as you seem to want to keep default 'cut label' behavior then you probably wont escape from writing your own solutions.

UPDATE: OK. After playing with code for some time I must admit that getting those tips to show can be a little tricky but once you know what to do it's actually trivial. What you need to do is to set showDataTips property to true and dataTipFunction to some function generating your tip ex.

function(item:Object):String{
    return item.tipField;
}

Weird thing here is the fact that setting dataTipField property to 'tipField' won't work the same way as above function and as much as I wish to know why, it remains secret to me.

UPDATE 2: Actually this behavior is not weird at all as it is clearly mentioned in showDataTips documentation but as I'm getting old and can't see as good as I used to you must forgive me my previous statement :)

Answer 2

Hi Ofir,

I ran into basically the same scenario... well there are minor differences, I'm using a Flex mx.controls.List and there's a renderer set on it, the renderer is an extension of checkbox, I wanted to have tighter control over the tool-tips so I can choose to display ancillary information as opposed to the full-text (and only when truncated). I tried poking around with some things based on looking at the ToolTipManager source but using the internal register method wasn't working out, ultimately I did basically what you said and that seems to be working without issue. So wondering whats the issue with using your own event handlers, you can still use the built in ToolTipManager methods for showing/hiding so it appears relatively clean. Code below is from the renderer itself:

private var myToolTip:IToolTip;

public function FilterItemRenderer() {
    addEventListener(MouseEvent.MOUSE_OVER, mouseOver_handler);
    addEventListener(MouseEvent.MOUSE_OUT, mouseOut_handler);
}
private function mouseOver_handler(event:MouseEvent):void
{
    //In my case using the data elements of the DP to carry the info for tooltips
    if(data.hasOwnProperty("toolTip") && data.toolTip)
        myToolTip = ToolTipManager.createToolTip(data.toolTip, event.stageX+5, event.stageY-5)
}
private function mouseOut_handler(event:MouseEvent):void
{
    if(myToolTip)
        ToolTipManager.destroyToolTip(myToolTip);
    myToolTip=null;
}
override public function get toolTip():String
{
    return null;
}

So I guess my answer is no I don't see any way to do this outside of what you suggested, but once again could you clarify what the issue with this is?

Thanks and good luck, Shaun