Tooltip custom Placement on Flex Listbox rollover
Posted by ravi | Posted in Listbox, flex, tooltip | Posted on 18-06-2009
Tags: Custom, Listbox, tooltip
0
The example below shows how to add a tooltip on roll over event of flex ListBox items. I don’t say that this is the perfect way to do this…but i’m happy as long as it serves me…
just rollover any of the listbox items and it will show the index of that item. So once you’ve the index, i guess you can do any custom label operations.
Here is the source code for the above example:
<![CDATA[
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
import mx.events.ListEvent;
import mx.events.ToolTipEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection([{name:"Ted Patrick", blog:"http://www.onflex.org/"},
{name:"Ryan Stewart", blog:"http://blogs.zdnet.com/Stewart"},{name:"Peter DeHann", blog:"http://blog.flexexamples.com/"},
{name:"Raghu", blog:"http://raghuonflex.wordpress.com/"},{name:"Harish Sivaramakrishnan", blog:"http://flexgeek.wordpress.com/"}
]);
private var tip:ToolTip
private function itemRollOver(event:ListEvent):void
{
tip = ToolTipManager.createToolTip(event.rowIndex+"",event.currentTarget.x+event.currentTarget.width,event.currentTarget.mouseY)as ToolTip;
}
private function itemRollOut(event:ListEvent):void
{
ToolTipManager.destroyToolTip(tip)
}
]]>
itemRollOver="itemRollOver(event)" itemRollOut="itemRollOut(event)"/>
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
import mx.events.ListEvent;
import mx.events.ToolTipEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection([{name:"Ted Patrick", blog:"http://www.onflex.org/"},
{name:"Ryan Stewart", blog:"http://blogs.zdnet.com/Stewart"},{name:"Peter DeHann", blog:"http://blog.flexexamples.com/"},
{name:"Raghu", blog:"http://raghuonflex.wordpress.com/"},{name:"Harish Sivaramakrishnan", blog:"http://flexgeek.wordpress.com/"}
]);
private var tip:ToolTip
private function itemRollOver(event:ListEvent):void
{
tip = ToolTipManager.createToolTip(event.rowIndex+"",event.currentTarget.x+event.currentTarget.width,event.currentTarget.mouseY)as ToolTip;
}
private function itemRollOut(event:ListEvent):void
{
ToolTipManager.destroyToolTip(tip)
}
]]>
itemRollOver="itemRollOver(event)" itemRollOut="itemRollOut(event)"/>
Here is the post which explains a much simpler way to create tooltips but you cannot custom place these tooltips:
http://raghuonflex.wordpress.com/2007/09/19/tooltips-for-combobox-items-or-list-items/
