Automatically display a toolTip in an ItemRenderer when the row is visible in the DataGrid

Question

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 conditionally display an image if certain conditions are met. I'm currently using the ToolTipManager to display additional information if the user mouses over the image.

Here's what I would like to do:

Instead of showing the toolTip when the user places their mouse over the image, I would like to automatically display the toolTip whenever the image is visible in the AdvancedDataGrid. If the user scrolls through the AdvancedDataGrid, the toolTip should move and follow along with its image accordingly.

Sample AdvancedDataGrid:

<mx:AdvancedDataGrid id="myAdvancedDataGrid" 
                        displayItemsExpanded="true"
                        allowMultipleSelection="false"
                        dataProvider="{myTreeData}"
                        draggableColumns="false"
                        depthColors="{[0xD6E5FF,0xFFFFFF]}"
                        folderClosedIcon="{null}" folderOpenIcon="{null}" defaultLeafIcon="{null}">
    <mx:columns>
        <mx:AdvancedDataGridColumn id="colID" headerText="ID" dataField="myID"/>
        <mx:AdvancedDataGridColumn id="colComments" headerText="Comments" dataField="comments"/>
    </mx:columns>
    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider column="{colComments}" depth="2" dataField="comments" renderer="com.whatever.AdvancedDataGridCommentsRenderer" />
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

And the current AdvancedDataGridRendererProvider:

<?xml version="1.0" encoding="utf-8"?>
<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/myImage.png")]
            [Bindable]
            private var myIcon:Class;

            private var commentsToolTip:ToolTip;

            override public function set data(value:Object):void
            {
                super.data = value;
                if (value["comments"] != null)
                {
                    if (value["comments"].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);

                // Convert the targets 'local' coordinates to 'global' -- this fixes the
                // tooltips positioning within containers.
                pt = evt.currentTarget.parent.contentToGlobal(pt);

                commentsToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip;
                commentsToolTip.setStyle("borderColor", "#ff0000");
                commentsToolTip.setStyle("color", "white");
                var yOffset:int =  commentsToolTip.height + 5;
                commentsToolTip.y -= yOffset;
                commentsToolTip.x -= 5;
            }

            // Remove the tooltip
            private function killToolTip():void
            {
                ToolTipManager.destroyToolTip(commentsToolTip);
            }
        ]]>
    </fx:Script>
    <mx:Image id="myImage" 
              source="{myIcon}" 
              mouseOver="showToolTip(event, data['comments'].toString())" 
              mouseOut="killToolTip()" />
</mx:HBox>

Any suggestions?

Answer 1

If the tooltip needs to be displayed all the time the image is displayed, it's not really a tooltip that you need, in that case you should just add a canvas/text field to your item renderer.

e.g.

<mx:HBox id="myContainer">
  <mx:Image id="myImage" 
          source="{myIcon}" 
          mouseOver="showToolTip(event, data['comments'].toString())" 
          mouseOut="killToolTip()" />
  <mx:Label text="Some text" />
</mx:HBox>

Then set change the calls to myImage.visible to myContainer.visible

However, for the quick and dirty fix, you already have everything you need, just make the calls in the set data override:

        override public function set data(value:Object):void
        {
            super.data = value;
            if (value["comments"] != null)
            {
                if (value["comments"].toString().length > 0)
                {
                    myImage.visible = true;
                    showToolTip(<params>);
                }
                else
                {
                    myImage.visible = false;
                    killToolTip(<params>);
                }
            }
            else
            {
                myImage.visible = false;
            }

            validateDisplayList();
        }