Display toolTip in MenuBar

Similar to ComboBox and Menu, we dont have a property called "toolTipField" like "labelField" for MenuBar where we can bind and set the toolTip with the property of the dataProvider items. MenuBar has property "tootlTip" which when set will be applicable for all menubar items but it wont be unique for each menu bar item. Then how do you display the tooltip for each MenuBar item using the property of the item itself? Well, the solution is similar to Display toolTip for menu items in Menu. Check below example. In the MenuBar 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 menubar item. 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 MenuBar and setting the dataProvider with the ArrayCollection of ValueObjects that act as MenuBar items. Also I am setting the "menuBarItemRenderer" with Custom MenuBarItem that sets the toolTip of the MenuBar items.



<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundColor="#FFFFFF" 
   initialize="init()">

   <mx:Script>
      <![CDATA[
         import com.jusfortechies.controls.ValueObject;
         import mx.collections.ArrayCollection;
			
         [Bindable]
         private var myMenuData:ArrayCollection = new ArrayCollection();

         public function init():void {
            myMenuData.addItem(new ValueObject("MA", "MenuItem A", "This is MenuItem A"));
            ...
				
            myMenuBar.dataProvider = this.myMenuData;
         }
      ]]>
   </mx:Script>
    
   <mx:MenuBar id="myMenuBar" labelField="label" iconField="icon" 
      menuBarItemRenderer="com.jusfortechies.controls.CustomMenuBarItem"/>
</mx:Application>


Step 3: This is the final step and in this step I am setting the toolTip of each menubar item using "this.toolTip = ValueObject(value).toolTip". Thats it. Very simple solution.



package com.jusfortechies.controls
{
   import mx.controls.menuClasses.MenuBarItem;
	
   public class CustomMenuBarItem extends MenuBarItem 
   {
      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