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

Advertisements

10 Responses to ToolTips for ComboBox Items or List Items

  1. do you have any trick for repositioning the dataTip to the right ( direction) so i can get to my List control easily? thanks very much.

  2. saravanan says:

    HI ,

    Nice stuff ….. thanks man 🙂

  3. antony says:

    Hello Raghu,

    your post helped a lot. Thanks !

  4. Mike McConnell says:

    Raghu,

    Great tip…Very useful. Would you happen to know how to place the datatip such that it does not cover the underlying data when it pops open?

    Thank You,
    M. McConnell

  5. Gopi says:

    Nice… Work .. it’s very helpful…

  6. Jon says:

    Cheers, helped me out!

  7. Freemind says:

    hi…
    Thanks for the tip helped me a lot…

  8. ravi says:

    this is very useful for showing datatips simply…
    for those guys who want to show the tooltip on the right side, please check here:
    http://ravimarella.com/getriaed/?p=14

  9. flywithoutwings says:

    great post..thanks man..i’ve made a post on how to custom place the tooltips on Listbox rollover…you can view it on my blog…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s