0 Replies Latest reply on Feb 10, 2013 4:49 PM by aspiring_ToBeProgramer

    How to add a Image to the ToolTip?

    aspiring_ToBeProgramer

      I want to add a image to the tooTip that i have have currently. So that when u rollover the row its show a the ship information and a image of a ship. I want the image to be displayed according to the type of ship. There is mainly 3 type. So according to the type i will display the image and the text information about the ship. For now I just used dummy data.I dont know if the toolTip can support to hold an image.

      So my Ouestions:

      1. How to add an image to the existing tool tip i have(in the yellow box)
      2. how to add the image in away which is not really static so that I can display according to ship type later on.

      Pls can someone help me with this.

      Thank you soo much

      This is the code I currently have (Its the entire codes so u can run on ur pc if u want) :

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