flex - how to add a custom Tool tip to spark data Grid? -

flex - how to add a custom Tool tip to spark data Grid? -

i want add together panel component tooltip each row in spark datagrid. when mouse rollover user can see info each ship. want panel tooltip datagrid cause want organize info neatly , place image in panel.

i came across : http://help.adobe.com/en_us/flex/using/ws2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html show illustration of "implementing itooltip interface" using panel.i tried manipulating codes didt work spark datagrid.

so question :

can 1 pls show me how can utilize panel tool tip each row in spark info grid.

i have been struggling quite time.if possible pls give me example.

this codes below (i tried follow illustration : http://help.adobe.com/en_us/flex/using/ws2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#ws2db454920e96a9e51e63e3d11c0bf60d65-7ff4 -"implementing itooltip interface")

<fx:script> <![cdata[ import designitemrenderer.paneltooltip; import mx.events.tooltipevent; import mx.collections.arraycollection; import mx.controls.alert; import spark.events.gridevent; [bindable] private var myarrivalships:arraycollection = new arraycollection([ {arrivalshipsname:"ship a", etd:"12 march"}, {arrivalshipsname:"ship b", etd:"25 march"} ]); private function createcustomtip(event:tooltipevent):void { var ptt:paneltooltip = new paneltooltip(); ptt.title = "my ship info"; ptt.bodytext = "my info ship"; event.tooltip = ptt; } ]]> </fx:script> <s:bordercontainer x="267" y="11" width="331" height="586"> <s:datagrid id="arrivaltable" x="10" y="326" width="302" height="205" requestedrowcount="4" dataprovider="{myarrivalships}" tooltipcreate="createcustomtip(event)"> <s:columns> <s:arraylist> <s:gridcolumn datafield="arrivalshipsname" headertext="arrival ships" ></s:gridcolumn> <s:gridcolumn datafield="etd" headertext="etd"></s:gridcolumn> </s:arraylist> </s:columns> </s:datagrid> <s:bordercontainer x="10" y="19" width="302" height="285"> </s:bordercontainer> </s:bordercontainer>

my custom panel :

<s:panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" implements="mx.core.itooltip" > <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <fx:script> <![cdata[ [bindable] public var bodytext:string = ""; // implement required methods of itooltip interface; these // methods not used in example, though. public var _text:string; public function text():string { homecoming _text; } public function set text(value:string):void { } ]]> </fx:script> <s:richtext text="{bodytext}" percentwidth="100"/>

simple way - when application ready, use:

tooltipmanager.tooltipclass = paneltooltip;

and refactoring code.

flex datagrid