在DataGrid中可見行時，自動在ItemRenderer中顯示工具提示

Question

我有一個AdvancedDataGrid，它使用HierarchicalData以樹形格式顯示數據。對於其中一列，如果滿足某些條件，我使用AdvancedDataGridRendererProvider來有條件地顯示圖像。如果用戶將鼠標懸停在圖像上，我正在使用ToolTipManager來顯示其他信息。

這是我想要做什麼：

而不是顯示toolTip當用戶將他們的鼠標在圖像的，我想自動顯示toolTip每當圖像是在AdvancedDataGrid可見。如果用戶滾動瀏覽AdvancedDataGrid，則toolTip應該相應地移動並跟隨其圖像。

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

而且目前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

然而，對於快速和骯髒的修復，你已經擁有你需要的一切，只要在設定數據覆蓋的調用：

 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(); 
     }