Simple tooltip on Spark Datagrid Row/Cell

On the GridColumn's you can use the "dataTipField" property to select which field name to pull the tooltip information.

There is also a "showDataTips" field property that can be enabled, by default it looks for a "label" property to pull tooltip information.

If you would like a truly customized tooltip, why not try the "dataTipFunction" to be able to setup the tooltips display.

This solves the problem -

First component......

<?xml version="1.0" encoding="utf-8"?>

<s:WindowedApplication

          xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx"

          minWidth="500" minHeight="300"

          >

<s:layout>

  <s:VerticalLayout/>

</s:layout>

<fx:Declarations>

</fx:Declarations>

<fx:Script>

                    <![CDATA[

                    ]]>

</fx:Script>

<s:DataGrid

                    id="Dg"

                    width="300" height="200"

                    horizontalCenter="0" verticalCenter="0"

                    selectionMode="singleCell"

                    >

  <s:columns>

  <s:ArrayList>

                                        <s:GridColumn headerText="Ind"           width="100"          dataField="index" />

                                        <s:GridColumn headerText="Label" width="200" dataField="label" itemRenderer="PopUpRenderer" />

  </s:ArrayList>

  </s:columns>

  <s:dataProvider>

  <s:ArrayList>

                                        <fx:Object label="One" index="0" />

                                        <fx:Object label="Two" index="1" />

                                        <fx:Object label="Three" index="2" />

                                        <fx:Object label="Four" index="3" />

                                        <fx:Object label="Five" index="4" />

                                        <fx:Object label="Six" index="5" />

  </s:ArrayList>

  </s:dataProvider>

</s:DataGrid>

</s:WindowedApplication>

Second component.......

<?xml version="1.0" encoding="utf-8"?>

<s:GridItemRenderer

          xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx"

          >

<fx:Script>

                    <![CDATA[

                              override public function set data(value:Object):void

                              {

                                        if(value != null)

                                        {

                                                  super.data = value;

                                                  lbl.text = data['label']

                                        }

                              }

                              [Bindable] protected var tpStr:String = 'i';

                              protected function lbl_mouseOverHandler(event:MouseEvent):void

                              {

                                        if(data['label'] == 'Three')

                                        {

                                                  toolTp.visible = true;

                                                  tpStr = data['label'];

                                        }

                                        else

                                        {

                                                  toolTp.visible = false;

                                        }

                              }

                    ]]>

</fx:Script>

    <s:states>

        <s:State name="normal" />

        <s:State name="hovered"/>

    </s:states>

<s:Group

                    width="100%" height="100%"

                    mouseOver="lbl_mouseOverHandler(event)"

                    >

                    <s:Label id="lbl" verticalCenter="0" x="3" />

</s:Group>

    <s:PopUpAnchor

                    id="popUpAnc"

                    popUpPosition="center"

        displayPopUp.hovered="true"

        >

  <mx:ToolTip

                              id="toolTp"

                              visible="false"

                              text="{tpStr}"

                              />

    </s:PopUpAnchor>

</s:GridItemRenderer>