Custom tooltip for datagrid

<!-- 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>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77: