Skip navigation
Currently Being Moderated

My custom Tool tip on spark data Grid don't work ?

Feb 10, 2013 5:57 PM

Tags: #flex #spark #datagrid. #tooltips

I want to add panel component as my tooltip for each row in my Spark DataGrid. So when mouse rollover the user can see the information for each the ship. I want a panel as my tooltip for dataGrid cause I want to organize my data neatly and also place a image in the panel.

I came across : 60d65-7ff6.html  where they show an example of "Implementing the IToolTip interface" using the panel.I tried manipulating the codes but it didt work for my spark dataGrid.

So my question :

Can some one pls show me how I can use the Panel as my tool tip for each row in spark data grid.

I have been struggling for quite some time.If possible pls Give me an example.

This is my codes below (I tried to follow the example from : 60d65-7ff6.html#WS2db454920e96a9e51e63e3d11c0bf60d65-7ff4 -"Implementing the IToolTip interface")


My MXML Application codes :



        import DesignItemRenderer.PanelToolTip;

        import mx.collections.ArrayCollection;         
        import mx.controls.Alert;  

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

        private function createCustomTip(event:ToolTipEvent):void {
            var ptt:PanelToolTip = new PanelToolTip();
            ptt.title = "my Ship Info";
            ptt.bodyText = "my data for the ship";
            event.toolTip = ptt;

<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}" toolTipCreate="createCustomTip(event)">
<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">




My Custom Panel codes :


<s:Panel xmlns:fx=""
xmlns:mx="library://" width="400" height="300"
implements="mx.core.IToolTip" >
<!-- Place non-visual elements (e.g., services, value objects) here -->
        public var bodyText:String = "";

        //  Implement required methods of the IToolTip interface; these
        //  methods are not used in this example, though.
        public var _text:String;

        public function get text():String {
            return _text;
        public function set text(value:String):void {
<s:RichText text="{bodyText}" percentWidth="100"/>



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