当行在 DataGrid 中可见时，自动在 ItemRenderer 中显示工具提示

Question

我有一个AdvancedDataGrid，它使用HierarchicalData 以树格式显示数据。对于其中一列，如果满足某些条件，我将使用AdvancedDataGridRendererProvider 有条件地显示图像。如果用户将鼠标悬停在图像上，我目前正在使用ToolTipManager 来显示附加信息。

这是我想做的事情：

当用户将鼠标放在图像上时，我不想显示toolTip，而是希望在AdvancedDataGrid 中看到图像时自动显示toolTip。如果用户滚动浏览AdvancedDataGrid，toolTip 应随之移动并跟随其图像。

高级数据网格示例：

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

以及当前的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>

有什么建议吗？

Answer 1

如果需要在显示图像时始终显示工具提示，那么它并不是您真正需要的工具提示，在这种情况下，您只需向项目渲染器添加一个画布/文本字段。

例如

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

然后将对 myImage.visible 的调用设置为 myContainer.visible

但是，为了快速而肮脏的修复，您已经拥有了所需的一切，只需在 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();
        }