如何將圖像添加到工具提示？

Question

我想添加一個圖像到我目前擁有的tooTip。因此，當你翻轉該行時，它會顯示船舶信息和船隻圖像。我希望根據船的類型顯示圖像。主要有3種類型。所以根據類型我會顯示船的圖像和文字信息。現在我只是使用了虛擬數據。我不知道toolTip是否可以支持保存圖像。

所以我Ouestions：

1. 如何將圖像添加到現有的工具提示我有（即黃箱）
2. 如何在客場是不是真的靜態添加圖像，這樣我以後可以根據船型顯示。

請問有人可以幫我解決這個問題。

謝謝你洙多:)

這是我現在有（它的整個代碼，以便美國可以在你們的電腦運行如果u想）代碼：

<fx:Script> 
    <![CDATA[  
     import mx.collections.ArrayCollection;   
     import mx.controls.Alert; 
     import spark.events.GridEvent;   
     import spark.components.Image; 


     [Bindable] 
     private var myArrivalShips:ArrayCollection = new ArrayCollection([ 
      {arrivalShipsName:"Ship A", ETD:"12 March"}, 
      {arrivalShipsName:"Ship B", ETD:"25 March"}    
     ]); 

     private function buildToolTip(item:Object,column:GridColumn):String{ 
      var myString:String = ""; 
      if(item != null) 
      { 
       myString = myString +"Ship name : " + item.arrivalShipsName + "\n"; 
       myString = myString + "ETD : " + item.ETD + "\n" +"Service: Repair"+"\n"+"Length of ship : 50"+"\n"+"Agent contact: 982392398"; 
      } 
      return myString; 
     } 


    ]]> 
</fx:Script> 
<s:BorderContainer x="267" y="11" width="331" height="586"> 

    <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" showDataTips="true" dataTipFunction="buildToolTip"> 
     <s:columns> 
      <s:ArrayList> 
       <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn> 
       <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>    
      </s:ArrayList> 
     </s:columns>    

    </s:DataGrid> 
    <s:BorderContainer x="10" y="19" width="302" height="285"> 
    </s:BorderContainer> 

</s:BorderContainer> 

Answer 1

你有2個案例：

1. 與自己修改過的ToolTipManagerImpl，在那裏你切換toolTipClass與自己的自定義佈局和皮膚更換ToolTipManagerImpl。你可以找到例子。

2. 創建自定義工具提示，擴展UIComponent實現IToolTip。原型看起來像原來的提示： 主要應用MXML：

   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          creationComplete="creationCompleteHandler(event)" 
          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
       <fx:Script> 
        <![CDATA[   
         import mx.collections.ArrayCollection; 
         import mx.events.FlexEvent; 
         import mx.events.ToolTipEvent; 
         import mx.managers.ToolTipManager; 
   
        [Bindable] 
        private var myArrivalShips:ArrayCollection = new ArrayCollection([ 
         {arrivalShipsName:"Ship A", ETD:"12 March", image: "http://url"}, 
         {arrivalShipsName:"Ship B", ETD:"25 March", image: "http://url"}    
        ]); 
   
        private function buildToolTip(item:Object,column:GridColumn):String 
        { 
         return JSON.stringify(item); 
        } 
   
        protected function creationCompleteHandler(event:FlexEvent):void 
        { 
         ToolTipManager.toolTipClass = ToolTipCustomClass; 
        } 
       ]]> 
   </fx:Script> 
   <fx:Declarations></fx:Declarations> 
   
   <s:BorderContainer x="267" y="11" width="331" height="586"> 
       <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" 
          showDataTips="true" dataTipFunction="buildToolTip"> 
        <s:columns> 
         <s:ArrayList> 
          <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn> 
          <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>    
         </s:ArrayList> 
        </s:columns>    
       </s:DataGrid> 
       <s:BorderContainer x="10" y="19" width="302" height="285"> 
       </s:BorderContainer> 
   
   </s:BorderContainer></s:Application> 
   

和類ToolTipCustomClass：

package 
{ 
    import flash.display.DisplayObject; 
    import flash.events.Event; 

    import mx.controls.Image; 
    import mx.controls.ToolTip; 
    import mx.core.EdgeMetrics; 
    import mx.core.IRectangularBorder; 
    import mx.core.mx_internal; 
    import mx.styles.ISimpleStyleClient; 
    import mx.utils.ObjectUtil; 

    use namespace mx_internal; 

    public class ToolTipCustomClass extends ToolTip 
    { 

     private var _image:Image; 


     public function ToolTipCustomClass() 
     { 
      super(); 
     } 

     override protected function createChildren():void 
     { 
      mx_internal::createTextField(-1); 

      createBorder(); 

      textField.visible = false; 

      _image = new Image(); 
      _image.mouseChildren = false; 
      _image.mouseEnabled = false; 
      _image.addEventListener(Event.COMPLETE, onLoadCompliteHandler); 

      addChild(_image); 
     } 

     protected function onLoadCompliteHandler(event:Event):void 
     { 
      _image.removeEventListener(Event.COMPLETE, onLoadCompliteHandler); 

      textField.x = _image.contentWidth; 
      textField.width = textField.width - _image.width; 

      invalidateDisplayList(); 
     } 

     override protected function measure():void 
     { 
      super.measure(); 

      _image.width = 100; 
      _image.height = 100; 
     } 

     override public function set text(value:String):void 
     { 
      if (!value) return; 

      var str:String = ""; 
      var item:Object; 

      try 
      { 

       item = JSON.parse(value); 

      } catch (e:Error) {} 

      if (item != null) 
      { 
       str += "Ship name : " + item.arrivalShipsName + "\n" + 
        "ETD : " + item.ETD + "\n" + 
        "Service: Repair\n" + 
        "Length of ship : 50\n" + 
        "Agent contact: 982392398"; 

       _image.source = item.image; 
      } 

      super.text = str; 
     } 

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      if (_image && _image.content) 
      { 
       var bm:EdgeMetrics = borderMetrics; 

       var leftInset:Number = bm.left + getStyle("paddingLeft"); 
       var topInset:Number = bm.top + getStyle("paddingTop"); 
       var rightInset:Number = bm.right + getStyle("paddingRight"); 
       var bottomInset:Number = bm.bottom + getStyle("paddingBottom"); 

       var widthSlop:Number = leftInset + rightInset; 
       var heightSlop:Number = topInset + bottomInset; 

       _image.move(leftInset, topInset); 

       border.setActualSize(unscaledWidth + _image.contentWidth, Math.max(unscaledHeight, _image.contentHeight)); 

       textField.move(_image.contentWidth, topInset); 
       textField.setActualSize(unscaledWidth - widthSlop - _image.contentWidth, unscaledHeight - heightSlop); 

       textField.visible = true; 
      } 
     } 

     private function createBorder():void 
     {   
      if (!border) 
      { 
       var borderClass:Class = getStyle("borderSkin"); 

       if (borderClass != null) 
       { 
        border = new borderClass(); 

        if (border is ISimpleStyleClient) 
         ISimpleStyleClient(border).styleName = this; 

        addChildAt(DisplayObject(border), 0); 

        invalidateDisplayList(); 
       } 
      } 
     } 

     private function get borderMetrics():EdgeMetrics 
     { 
      if (border is IRectangularBorder) 
       return IRectangularBorder(border).borderMetrics; 

      return EdgeMetrics.EMPTY; 
     } 
    } 
} 

不要忘記更換圖片URL中的項目對象。