How to show tool tip in mx Datagrid Row in Flex?

Question

I want to know how i show the tool tip of each data grid row or show some specific column's data in tool tip.

Answer 1

If you have a DataGrid and you want to display row specific data on mouseOver, here is how this can be done.

The first step is to enable showDataTips property for every DataGridColumn that you want to enable this functionality on.

Secondly, you need to have a dataTipFunction function on the DataGrid itself. Because dataTipFunction passes over the Grid row data as an Object to the calling function, you dont need to pass any arguments to it. Here is a little example that shows how to do it.

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

Source: http://www.anujgakhar.com/2008/01/13/flex-how-to-have-tooltip-on-every-row-of-datagrid/

Here's another explanation from a different source:

I used the itemRollOver and the itemRollOut events. in the itemRollOver we find the value of the object in the row, we get the label of the object and we set it as the datagrid tooltip. itemRollOut behaves as a cleaner...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.ListEvent;
            import mx.controls.ToolTip;

            private function createToolTip(event:ListEvent):void {
                var str:String =  DataGridItemRenderer(event.itemRenderer).data.label;
                dataGrid.toolTip = str;
            }

            private function deleteToolTip(obj:Object):void {
                dataGrid.toolTip = null;
            }

        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRollOut="deleteToolTip(event)"
            itemRollOver="createToolTip(event)"       
            >
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Source: http://www.flexdeveloper.eu/forums/mxml/tooltip-on-datagrid-row/

-Hope that helps

Answer 2

Adding to Aarons answer, if you want to ONLY show tooltips when the text is longer than the column width then you can use this code (based on the roll over events example):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="plain">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.ListEvent;
            import mx.controls.ToolTip;

            private function createToolTip(event:ListEvent):void {
                if (event.itemRenderer.measuredWidth>event.itemRenderer.width) {
                    var str:String =  DataGridItemRenderer(event.itemRenderer).data.label;
                    dataGrid.toolTip = str;
                }
            }

            private function deleteToolTip(obj:Object):void {
                dataGrid.toolTip = null;
            }

        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRollOut="deleteToolTip(event)"
            itemRollOver="createToolTip(event)"       
            >
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>