Display a toolTip in an ImageItemRenderer on mouseover with AdvancedDataGrid

I have an AdvancedDataGrid that uses HierarchicalData to display data in a tree format. For one of the columns, I'm using an AdvancedDataGridRendererProvider to display an image to the right of the label at depth 2.  On mouseover of the image, some information should be displayed. But when I tried, the image overrides the label text.. Can someone help me to resolve it.. I have implemented the code as below..

Sample AdvancedDataGrid code:-

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*">

<fx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.events.FlexEvent;
   
    [Bindable]
        private var dpHierarchy:ArrayCollection = new ArrayCollection([
            {Region:"Southwest", children: [
                {Region:"Arizona", children: [
                    {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
                    {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}, 
                {Region:"Central California", children: [
                    {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}, 
                {Region:"Nevada", children: [
                    {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}, 
                {Region:"Northern California", children: [
                    {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
                    {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}, 
                {Region:"Southern California", children: [
                    {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
                    {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
            ]}
        ]);
       
    ]]>
</fx:Script>

<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
variableRowHeight="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}" childrenField="children"/>
</mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="Region"/>
        <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                   headerText="Territory Rep"/>
        <mx:AdvancedDataGridColumn dataField="Actual"/>
        <mx:AdvancedDataGridColumn dataField="Estimate"/>
    </mx:columns>

<mx:rendererProviders>           
    <mx:AdvancedDataGridRendererProvider
    columnIndex="0"
    depth="2"
    renderer="showImage"
    />        
</mx:rendererProviders>  
</mx:AdvancedDataGrid>
</s:Application>

And the sample renderer code:-

<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         paddingLeft="2" paddingRight="2" paddingTop="2"
         horizontalScrollPolicy="off"
         verticalScrollPolicy="off"
         height="22"
         horizontalAlign="center">
    <fx:Script>
        <![CDATA[
            import mx.controls.ToolTip;
            import mx.events.FlexEvent;
            import mx.managers.ToolTipManager;
            [Embed(source="/assets/images/icon_info.png")]
            [Bindable]
            private var myIcon:Class;
           
            private var commentsToolTip:ToolTip;
           
            override public function set data(value:Object):void{
                super.data = value;
                if (value["Region"] != null){
                    if (value["Region"].toString().length > 0){
                        myImage.visible = true;
                    }
                    else{
                        myImage.visible = false;
                    }
                }
                else{
                    myImage.visible = false;
                }
                validateDisplayList();
            }
           
            private function showToolTip(evt:Event, text:String):void{
                var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);               
                pt = evt.currentTarget.parent.contentToGlobal(pt);               
                commentsToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "") as ToolTip;               
            }
           
            private function killToolTip():void{
                ToolTipManager.destroyToolTip(commentsToolTip);
            }
        ]]>
    </fx:Script>
    <mx:Image id="myImage"
              source="{myIcon}"
              mouseOver="showToolTip(event, data[Region].toString())"
              mouseOut="killToolTip()" />
</mx:HBox>