ToolTips for ComboBox Items or List Items

It is usually desired that tooltips be shown where extra information has to be displayed on mouse over. The problem here is to generate tooltips for List & ComboBox items.

Lets start with List

List has a showDatatips property that can be set to show the dataTips. You will then have to write a function to return the required string as the dataTip and assign it to the dataTipFunction property of the List…

With ComboBox, its a bit more complicated. The dropDown in a ComboBox, is by default a List, so if we can access the List and then set the above properties, we are done. For this you need to set a dropDownFactory for the ComboBox and then assign the factory object with the above properties that we discussed above for list. Here’s how

First define

private var myDropdownFactory:ClassFactory;

Call initApp() method on creationComplete

private function initApp():void{
myDropdownFactory = new ClassFactory(List);
myDropdownFactory.properties = {showDataTips:true, dataTipFunction:myDataTipFunction}
}

Then set this onto the ComboBox

<mx:ComboBox id=”myCB” dataProvider=”{myDP}” labelField=”name” dropdownFactory=”{myDropdownFactory}”/>

And the myDataTipFunction() looks something like this

private function myDataTipFunction(value:Object):String{
return (value.name+”‘s blog is “+value.blog);
}

It looks something like this

See the application and get the source code on the links below…

Application | Source

I initially thought this should be possible by setting the showDatatips and the dataTipField on the List, but it didn’t work as expected for me. I have logged a bug in the public bugbase…

About these ads