Skip to main content

ComboBox List ToolTip

(3 votes, average: 4.00 out of 5)

ComboBox is a very common component used in many projects, what if we can extend its features?
The following example creates a custom tooltip for each item in the DropDown List, data provider for these tips can be set in the ComboBox dataProvider as follows:

[Bindable] private var comboProvider:Array = [
    {label:"item 1", data:{tip:"bla bla bla .."}},
    {label:"item 2", data:{tip:"bla bla .."}},
    {label:"item 3", data:{tip:"bla bla bla bla .."}}
    ];


source code available via flash context menu

Next step is to implement custom controls to make this ToolTip interactive by adding some like “rename” and “delete”
I’ll get back to you soon with another example

2 thoughts to “ComboBox List ToolTip”

  1. Dude, you code is rocking, BUT it has a fatal flaw that is even reproducable on your page. I see the tooltips as expected. However, select an item in the list. and close the list. Try to open the list again and you app crashes. PLEASE tell us how to fix this.

    Here is the error:

    ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
    at flash.display::DisplayObjectContainer/removeChild()
    at mx.core::UIComponent/https://www.adobe.com/2006/flex/mx/internal::$removeChild()
    at mx.core::UIComponent/removeChild()
    at combotip/hideListTip()
    at combotip/showListTip()
    at combotip/___combotip_ComboBox1_itemRollOver()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()
    at mx.controls::ComboBox/dropdown_itemRollOverHandler()

  2. Thank you Phil for your note, it is a fatal of course ..
    I did update the code above [view source], one additional condition needed for hideListTip function as follows:

    private function hideListTip(event:*):void {
    	if (customTip != null) {
    		if (ComboBox(event.target).dropdown.contains(customTip)) {
    			ComboBox(event.target).dropdown.removeChild(customTip);
    		}
    		customTip = null;
    	}
    }

Leave a Reply

Your email address will not be published. Required fields are marked *