Display tooltip for menu items in Menu

This may look simple and you can say that by simply setting "toolTip" of Menu will solve the issue. Yes, it will if you have to show static toolTip (a common one) for all Menu items in the menu. But if you have to display toolTip for each menuItem using its label or description, then you need a different solution. Check below example. Click on button and Popup menu will display. Hover on each item and you will see a description displayed as toolTip for each menu item.

Let me start the solution directly with step 1 and complete in 3 steps.........

Step 1: As step 1, I would like to show you the ValueObject I have used as menu item. Its a simple ValueObject with id, label and tooltip as properties. An ArrayCollection of these ValueObjects is used as dataProvider of the Menu.

package com.jusfortechies.controls
	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 Menu that will be displayed when you the click on "Open" button. The ArrayCollection is instantiated and set with menu items (ValueObject) when the button is initialized. Its a simple menu creation. Only difference here, if you observe closely, a custom MenuItemRenderer is used as itemRenderer for Menu class. We will see what it contains in the next step and that is the step that contains the solution.

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

            import com.jusfortechies.controls.CustomMenuItemRenderer;
            import com.jusfortechies.controls.ValueObject;
            import mx.controls.Menu;
            import mx.collections.ArrayCollection;
            private var myMenuData:ArrayCollection = new ArrayCollection();

            // Create and display the Menu control.
            private function createAndShow():void {
                var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
                myMenu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
                //Position the menu and show it when the button is clicked
                myMenu.show((this.width/2 - this.myButton.width/2), 50);
            public function init():void {
                myMenuData.addItem(new ValueObject("MA", "MenuItem A", "This is tooltip of MenuItem - A"));
                myMenuData.addItem(new ValueObject("MB", "MenuItem B", "This is tooltip of MenuItem - B"));
                myMenuData.addItem(new ValueObject("MC", "MenuItem C", "This is tooltip of MenuItem - C"));
                myMenuData.addItem(new ValueObject("MD", "MenuItem D", "This is tooltip of MenuItem - D"));

        <mx:Button id="myButton" initialize="init()" label="Open Menu" click="createAndShow();"/>

Step 3: This is the final step and very important step. This step shows the CustomMenuItemRenderer that extends MenuItemRenderer and this CustomMenuItemRenderer is set as itemRenderer of the Menu. In this CustomMenuItemRenderer, to set the toolTip of the Menu items, I am setting the toolTip of the label with the Menu item (ValueObject) toolTip value. That does the magic and shows the tooltip of the menu items.

package com.jusfortechies.controls
	import mx.controls.Alert;
	import mx.controls.menuClasses.MenuItemRenderer;
	public class CustomMenuItemRenderer extends MenuItemRenderer 
		override public function set data(value:Object):void {
			if(value == null) return;
			super.data = value;
				this.label.toolTip = ValueObject(value).toolTip;

You can download the example source code here.

Download the example code.

blog comments powered by Disqus