Create a tooltip in AdvancedDataGrid

Question

Hi,
I would I to ask how to create a tooltip in AdvancedDataGrid.
I created a new MXML component named CustomToolTip, based on a VBox.
This is my code for custom tooltip:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         implements="mx.core.IToolTip"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:services="services.*">
<fx:Script>
   <![CDATA[
    import mx.controls.Alert;
    import mx.events.FlexEvent;
    [Bindable]
    public var _dataId:String;
    protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
        var dataid:String;
        dataid = _dataId;
        getSpecificUserDataCResult.token = twitterSentimentManager.getSpecificUserDataC(dataid);
    protected function dataGrid2_creationCompleteHandler(event:FlexEvent):void
        var dataid:String;
        dataid = _dataId;
        getSpecificUserDataUResult.token = twitterSentimentManager.getSpecificUserDataU(dataid);
    public var _text:String;
    public function get text():String {
        return _text;
    public function set text(value:String):void {
    ]]>
</fx:Script>
<fx:Declarations>
    <s:CallResponder id="getSpecificUserDataCResult"/>
    <services:TwitterSentimentManager id="twitterSentimentManager" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
    <s:CallResponder id="getSpecificUserDataUResult"/>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel width="401" height="300">
    <mx:Image x="52" y="10" width="105" height="91" creationComplete="dataGrid_creationCompleteHandler(event)" source="{getSpecificUserDataUResult.lastResult[0].category}"/>
    <s:Label x="197" y="22" text="Username"/>
    <s:Label x="197" y="55" text="Name"/>
    <s:Label x="197" y="89" text="Bio Info"/>
    <s:Label x="261" y="22" id="username0" text="{getSpecificUserDataUResult.lastResult[0].userID}"/>
    <s:Label x="261" y="55" id="name0" text="{getSpecificUserDataUResult.lastResult[0].name}"/>
    <s:Label x="261" y="89" id="bioinfo0" text="{getSpecificUserDataUResult.lastResult[0].bioData}"/>
    <s:Label x="52" y="140" text="Content"/>
    <s:TextArea x="105" y="140" height="90" text="{getSpecificUserDataCResult.lastResult[0].content}"/>
</s:Panel>
<mx:DataGrid id="dataGrid2" creationComplete="dataGrid2_creationCompleteHandler(event)" dataProvider="{getSpecificUserDataUResult.lastResult}" visible="false">
    <mx:columns>
        <mx:DataGridColumn headerText="userID" dataField="userID"/>
        <mx:DataGridColumn headerText="weeklyInfluentialIndex" dataField="weeklyInfluentialIndex"/>
        <mx:DataGridColumn headerText="following" dataField="following"/>
        <mx:DataGridColumn headerText="category" dataField="category"/>
        <mx:DataGridColumn headerText="follower" dataField="follower"/>
        <mx:DataGridColumn headerText="bioData" dataField="bioData"/>
        <mx:DataGridColumn headerText="location" dataField="location"/>
        <mx:DataGridColumn headerText="influentialIndex" dataField="influentialIndex"/>
        <mx:DataGridColumn headerText="name" dataField="name"/>
    </mx:columns>
</mx:DataGrid>
<mx:DataGrid id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getSpecificUserDataCResult.lastResult}" visible="false">
    <mx:columns>
        <mx:DataGridColumn headerText="content" dataField="content"/>
        <mx:DataGridColumn headerText="userID" dataField="userID"/>
        <mx:DataGridColumn headerText="sentiment" dataField="sentiment"/>
        <mx:DataGridColumn headerText="dateTime" dataField="dateTime"/>
        <mx:DataGridColumn headerText="contentID" dataField="contentID"/>
    </mx:columns>
</mx:DataGrid>
</mx:VBox>
This is the code for AdvancedDataGrid "AllSentiments.mxml" :
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:component="component.*, com.hillelcoren.components.*"
           xmlns:components="com.hillelcoren.components.*"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:services="services.*"
           close="titleWindow_close(event)" title="Sentiments">
<fx:Script>
    <![CDATA[
        import mx.containers.TitleWindow;
        import mx.controls.Alert;
        import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
        import mx.events.CloseEvent;
        import mx.events.FlexEvent;
        import mx.events.ListEvent;
        import mx.events.ToolTipEvent;
        import mx.managers.PopUpManager;
        import spark.components.IItemRenderer;
        import spark.components.TitleWindow;
        [Bindable]
        public var _currentCountryName:String;
        protected function myADG_creationCompleteHandler(event:FlexEvent):void
            var currentCountryName:String;
            currentCountryName = _currentCountryName;
            getSpecificCountryResult.token = twitterSentimentManager.getSpecificCountry(currentCountryName);
        private function createCustomToolTip(event:ToolTipEvent):void {
            var toolTip:CustomToolTip = new CustomToolTip();
            var dataid:String = AdvancedDataGridItemRenderer(event.itemRenderer).data.userID;
            toolTip._dataId = dataid;           
            event.toolTip=toolTip;
        private function deleteToolTip(event:ListEvent):void {
            myADG.toolTip = null;
        ]]>
</fx:Script>
<fx:Declarations>
    <s:CallResponder id="getSpecificCountryResult" result="getSpecificCountryCollection.refresh()"/>
    <services:TwitterSentimentManager id="twitterSentimentManager" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
    <mx:GroupingCollection2 id="getSpecificCountryCollection" source="{getSpecificCountryResult.lastResult}">
        <mx:Grouping>
            <mx:GroupingField name="sentiment"/>
        </mx:Grouping>
    </mx:GroupingCollection2>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:AdvancedDataGrid x="48" y="50" id="myADG" designViewDataType="tree" toolTipCreate="createCustomToolTip(event)" selectedIndex="0" creationComplete="myADG_creationCompleteHandler(event)" dataProvider="{getSpecificCountryCollection}">
    <mx:columns>
        <mx:AdvancedDataGridColumn headerText="sentiment" dataField="sentiment"/>       
        <mx:AdvancedDataGridColumn headerText="userID" dataField="userID"/>
        <mx:AdvancedDataGridColumn headerText="dateTime" dataField="dateTime"/>
    </mx:columns>
</mx:AdvancedDataGrid>
/s:TitleWindow>
I got an error:  "1119: Access of possibly undefined property itemRenderer through a reference with static type mx.events:ToolTipEvent."
May I know where I have done wrong?
Thanks

Answer 1

Hi,
I see that this question is unanswerd for a while, and I came across it when I encountered the same problem.
If you want to acheive the tootip for each CELL in the datagrid then you can use the ItemOver listener
setup the listener:
dg.addEventListener(ListEvent.ITEM_ROLL_OVER , itemOver);
define itemOver:
public function itemOver(event:ListEvent):void
                var toolTipText:String                = (AdvancedDataGridItemRenderer)(event.itemRenderer).text; //only if you want to show the text in the cell itself as the tooltip
                (AdvancedDataGridItemRenderer)(event.itemRenderer).toolTip    = toolTipText;
and thats all you have to do.
Regards
Faizal