Skip navigation
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) :

        import mx.collections.ArrayCollection;         
        import mx.controls.Alert;  
        import spark.components.Image;

        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;

<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:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn>
<s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>             

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



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