Skip navigation
aspiring_ToBeProgramer
Currently Being Moderated

How to add a Image to the ToolTip?

Feb 10, 2013 4:49 PM

Tags: #flex #tool_tips #spark_datagrid

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>

 

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points