My custom Tool tip on spark data Grid don't work ?

Question

I want to add panel component as my tooltip for each row in my Spark DataGrid. So when mouse rollover the user can see the information for each the ship. I want a panel as my tooltip for dataGrid cause I want to organize my data neatly and also place a image in the panel.
I came across :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html  where they show an example of "Implementing the IToolTip interface" using the panel.I tried manipulating the codes but it didt work for my spark dataGrid.
So my question :
Can some one pls show me how I can use the Panel as my tool tip for each row in spark data grid.
I have been struggling for quite some time.If possible pls Give me an example.
This is my codes below (I tried to follow the example from :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#WS2d b454920e96a9e51e63e3d11c0bf60d65-7ff4 -"Implementing the IToolTip interface")
My MXML Application codes :
    <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 data for the 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 codes :
<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 the IToolTip interface; these
        //  methods are not used in this example, though.
        public var _text:String;
        public function get text():String {
            return _text;
        public function set text(value:String):void {
    ]]>
</fx:Script>
<s:RichText text="{bodyText}" percentWidth="100"/>
</s:Panel>

Answer 1

Ok I was getting ready to post the renderer code and then found the problem. I had copied this code from another renderer which had contentBackgroundAlpha=0 in the MXAdvancedDataGridItemRenderer tag. When I removed it, the style of the TextArea worked as intended. Your comment helped me to take a closer look at the renderer code, so thank you.