Display toolTip in ComboBox

We dont have a property called "toolTipField" like "labelField" for ComboBox to set the Object property as toolTip. ComboBox has property "tootlTip" which when set will be applicable for all dropdown items but what will you do if you have to show the description of each dropdown item as tooolTip? Well, its a simple solution and is similar to Display toolTip for menu items in Menu. Check below example. In the dropdown when you hover on each item, you will see the toolTip displayed.


This solution can also be done in 3 steps like Display toolTip for menu items in Menu

Step 1: This is the Value Object I am using to display as elements in the dropdown. This object contains three properties - id, lable and toolTip. The toolTip property contains the description of the object.



package com.jusfortechies.controls
{
   [Bindable]
   public class ValueObject
   {
      public var id:String;
      public var label:String;
      public var toolTip:String;
		
      public function ValueObject(id:String, label:String, toolTip:String=null)
      {
         this.id = id;
         this.label = label;
         this.toolTip = toolTip;
      }

   }
}


Step 2: In this step I am creating a ComboBox and setting the collection of ValueObjects as dataProvider. Also check that I am setting the itemRenderer of the ComboBox and this is a Custom renderer. This custom renderer contains the logic to display the toolTip in the ComboBox for each element using the "toolTip" property of the ValueObject.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   ... >

   <mx:Script>
      <![CDATA[
         ...

         [Bindable]
         private var stateArrayColl:ArrayCollection = new ArrayCollection();
								
         public function init():void {
            stateArrayColl.addItem(new ValueObject("AZ", "Arizona", "This is Arizona State"));
            ...
         }
									
      ]]>
   </mx:Script>

   <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle">
	 
      ...
	
      <mx:ComboBox id="comboBox" 
        itemRenderer="com.jusfortechies.controls.ComboBoxTooltipItemRenderer"
        dataProvider="{this.stateArrayColl}" initialize="init()" ... />
			
   </mx:VBox>		
	
</mx:Application>


Step 3: This is the final step and is the Custom renderer used for the ComboBox. This renderer extends Text control. But the whole logic lies in "this.toolTip = ValueObject(value).toolTip" and thats it. That does the magic and shows the tooltip of the ComboBox elements.



package com.jusfortechies.controls
{
   import mx.controls.Text;
	
   [Bindable]
   public class ComboBoxTooltipItemRenderer extends Text
   {
      override public function set data(value:Object):void {
         if(value == null) return;
         super.data = value;
         this.toolTip = ValueObject(value).toolTip;
      }
   }
}


You can download the example source code here.

Download the example code.





blog comments powered by Disqus