ItemRollOver with a custom ToolTip

Question

I have this custom toolTip:

   <?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         implements="mx.core.IToolTip"
         creationPolicy="all"
         cornerRadius="4" borderStyle="solid" backgroundColor="#FFFFFF"
         creationComplete="init()" width="100" height="100">
  <fx:Script>
    <![CDATA[
      import mx.core.IToolTip;

  public var arrItemsKits:Array=[];
  public var _text:String;

  public function get text():String { 
    return _text; 
  } 
  public function set text(value:String):void {
  } 

  protected function init():void
  {
    grid.dataProvider=arrItemsKits;
  }

]]>
  </fx:Script>



  <mx:DataGrid id="grid" width="100%" height="100%">
    <mx:columns>
      <mx:DataGridColumn headerText="Code" dataField="itemPartNumber"/>
      <mx:DataGridColumn headerText="Description" dataField="kitItemsNotes"/>
    </mx:columns>
  </mx:DataGrid>


</mx:VBox>

and i want it to fire it when i roll the mouse over a row from a datagrid, so i need to add an event listener(toolTipCreate) to the row of that grid.

Any ideas how can i solve this?

Thanks

Answer 1

Check out this

<!-- myDataGridTest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.core.IToolTip;
            import mx.events.ToolTipEvent;

            // holds the currently highlighted item
            private var highlightedItem:Object;

            // event listener to get our hands on the currently highlighted item.
            private function getHighlightedItem(e:ListEvent):void {
                highlightedItem = e.itemRenderer.data;
                // Quick n dirty way to force the ToolTipManager to refresh our tooltip.
                // We need to dispatch this by hand because the pointer never leaves myDataGrid
                // between successive highlights.
                myDataGrid.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));
            }

            private function createTooltip(e:ToolTipEvent):void {
                var tt:MyCustomTooltip = new MyCustomTooltip();
                tt.firstName = highlightedItem.name;
                tt.lastName = highlightedItem.surname;
                // Contract with the tooltip manager: if it finds an IToolTip instance attached to
                // the event, it uses that instance instead of creating the standard one.
                e.toolTip = tt;
            }
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDataGrid" toolTip=" " toolTipCreate="createTooltip(event)" itemRollOver="getHighlightedItem(event)">
        <mx:dataProvider>
            <mx:Object name="john" surname="doe"/>
            <mx:Object name="mike" surname="smith"/>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

<!-- MyCustomTooltip.mxml -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip" 
    backgroundColor="yellow" backgroundAlpha="0.6">

    <mx:Script>
        <![CDATA[
            private var _firstName:String;
            private var _lastName:String;

            // Dummy implementations to comply with mx.core.IToolTip
            public function get text():String {return null;}
            public function set text(value:String):void {}

            // properties and functions

            public function set firstName(value:String):void {
                _firstName = value;
                invalidateProperties();
            }

            public function set lastName(value:String):void {
                _lastName = value;
                invalidateProperties();
            }

            override protected function commitProperties():void {
                fName.text = _firstName;
                lName.text = _lastName;
            }
        ]]>
    </mx:Script>

    <mx:Label x="0" y="0" id="fName"/>
    <mx:Label x="0" y="20" id="lName"/>

</mx:Canvas>

. . Or try something like this . .

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="doInit();">
<mx:Script>
<!![CDATA[import mx.collections.ArrayCollection; // this holds the grid data
[Bindable]
private var myData:ArrayCollection = new ArrayCollection();private function doInit():void{
myData.addItem({fname:"Joe",lname:"Bloggs"});
myData.addItem({fname:"Joe1",lname:"Bloggs"});
}

private function buildToolTip(item:Object):String{
var myString:String = "";
if(item != null)
{
myString = myString + "Firstname : " + item.fname + "\n";
myString = myString + "Lastname : " + item.lname + "\n"
}
return myString;
}
]]>
</mx:Script>
<mx:DataGrid id="dGrid"  dataProvider="{myData}"  visible="true" dataTipFunction="buildToolTip">
<mx:columns>
<mx:DataGridColumn dataField="fname" headerText="FirstName" showDataTips="true" />
<mx:DataGridColumn dataField="lname" headerText="LastName" showDataTips="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>

Answer 2

I figured it out: On itemRollOver handler you add event.itemRenderer.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, createTT);