Display image in tooltip in flex

Many times for datagrids or dropdowns or images, you display tooltip to show additional information. This tooltip could be a datagrid or image or a simple text. Say for example, in the below datagrid when you hover on the "Country" column, you will see the "map" of the respective country displayed as tooltip.




Here when I hovered on country "United States of America", a tool tip having the USA map (image) is displayed.

How do you display an image in the tooltip? Write an item renderer that contains custom tooltip and set that item renderer as itemRenderer for the column of the datagrid. Thats all. Now when you hover on the column to which the itemRenderer was set, an image will be displayed.

If you look at below sample code, I have created ToolTipDataGridItemRenderer and set it as itemRenderer for Country column.



<mx:DataGrid id="myGrid" width="350" height="200" dataProvider="{initDG}" >
  <mx:columns>
	<mx:DataGridColumn dataField="Country" 
			itemRenderer="com.jusfortechies.tooltip.ToolTipDataGridItemRenderer" />
	<mx:DataGridColumn dataField="Population" />
  </mx:columns> 
</mx:DataGrid>


Below sample code is the itemRenderer that you need to create. You can download the complete sample project at the end of this article. What is happening in this itemRenderer? The magic lies in "toolTipCreate = 'createCustomTip(event);" and in "createCustomTip(event)" function. In the createCustomTip function, an image is added as child to "ConfigurableToolTip" which is nothing but VBox that implements IToolTip and then this VBox is set as tooltip to ToolTipEvent. Done.



<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingLeft="1"
	paddingRight="1"
	toolTip=" "
	toolTipCreate="createCustomTip(event);"
	>
	
 <mx:Script>
   <![CDATA[
     import mx.controls.dataGridClasses.DataGridListData;
     import mx.events.ToolTipEvent;

     import mx.controls.Image;

     [Bindable]
     private var displayInfo:String;

     private function createCustomTip(event:ToolTipEvent):void {

       //Create an instance of VBox - ConfigurableToolTip that extends IToolTip
       var configurableTooltip:ConfigurableToolTip = new ConfigurableToolTip();

       //Create the image and set its source
       var map:Image = new Image();
       map.scaleContent = false;

       map.source = data["Map"];
       map.height = 100;
       map.width = 100;

       //Add image as child to VBox
       configurableTooltip.addChild(map);

       //Set the IToolTip as tooltip of the event
       event.toolTip = configurableTooltip;
     }

     override public function set data(value:Object):void {
       super.data = value;
       displayInfo = data[(listData as DataGridListData).dataField];
     }

  ]]>
 </mx:Script>
	
 <mx:text>{displayInfo}</mx:text>
</mx:Text>


In this sample code, I have used a class called "ConfigurableToolTip" (See below sample code which is ConfigurableToolTip). Its a simple VBox that implements "mx.core.IToolTip" to act as tooltip. As seen in the above piece of code, the image is added as a child to this VBox.


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
implements="mx.core.IToolTip" width="300">
    <mx:Script><![CDATA[
        
        //  Implement required methods of the IToolTip interface
        public var _text:String;

        public function get text():String { 
            return _text; 
        } 
        public function set text(value:String):void {
        } 
    ]]></mx:Script>


</mx:VBox>

Just like the sample program Display datagrid in the Datagrid Tooltip, this also needs a simple renderer. Thats all. You can download the example source code here.

Download the example code.







blog comments powered by Disqus