Displaying item tool tips in a Flex ComboBox control

By Peter deHaan On January 26, 2008 · 19 Comments

The following example shows how you can truncate long item labels in a ComboBox control by setting a custom item renderer. In this example we’re using the Label control we’re using the Label control and taking advantage of the Label control’s truncateToFit property which truncates the string with an “…” and displays a tool tip showing the entire, non-truncated string when the truncateToFit property is set to true (which is the default value).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/displaying-item-tool-tips-in-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
        <mx:Object label="Donec sit amet dui nec pede aliquam auctor." />
        <mx:Object label="Integer vestibulum sodales dui." />
        <mx:Object label="Sed nonummy ligula et tortor." />
        <mx:Object label="Aenean varius neque vel felis." />
        <mx:Object label="Phasellus venenatis ipsum sit amet nisi." />
        <mx:Object label="Nullam vitae turpis et ipsum cursus venenatis." />
        <mx:Object label="Pellentesque tincidunt pede non arcu." />
        <mx:Object label="Aliquam ut massa quis ante dignissim egestas." />
        <mx:Object label="Curabitur facilisis velit sit amet metus." />
        <mx:Object label="Vivamus ornare massa ac massa." />
        <mx:Object label="Nam accumsan rutrum purus." />
    </mx:Array>

    <mx:ComboBox id="cb"
            dataProvider="{arr}"
            itemRenderer="mx.controls.Label"
            width="200" />

</mx:Application>

View source is enabled in the following example.

I didn’t think this was interesting (or useful) enough to warrant a new entry, so I’ll just post it here. The following example shows how you can set a tool tip on both the ComboBox control as well as its dropdown menu. The ComboBox control on the left only sets the toolTip property, so the tool tip only displays while over the ComboBox itself, not when the mouse cursor is over the dropdown menu. The ComboBox control on the right sets the toolTip property in MXML and then uses the creationComplete event to call a method which sets the ComboBox control’s dropdown.toolTip property to the ComboBox control’s toolTip property.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/displaying-item-tool-tips-in-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                comboBox2.dropdown.toolTip = comboBox2.toolTip;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
        <mx:Object label="Donec sit amet dui nec pede aliquam auctor." />
        <mx:Object label="Integer vestibulum sodales dui." />
        <mx:Object label="Sed nonummy ligula et tortor." />
        <mx:Object label="Aenean varius neque vel felis." />
        <mx:Object label="Phasellus venenatis ipsum sit amet nisi." />
        <mx:Object label="Nullam vitae turpis et ipsum cursus venenatis." />
        <mx:Object label="Pellentesque tincidunt pede non arcu." />
        <mx:Object label="Aliquam ut massa quis ante dignissim egestas." />
        <mx:Object label="Curabitur facilisis velit sit amet metus." />
        <mx:Object label="Vivamus ornare massa ac massa." />
        <mx:Object label="Nam accumsan rutrum purus." />
    </mx:Array>

    <mx:ComboBox id="comboBox1"
            dataProvider="{arr}"
            toolTip="Please select some text."
            width="200" />

    <mx:ComboBox id="comboBox2"
            dataProvider="{arr}"
            toolTip="Please select some text."
            width="200"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

Tagged with: itemRenderer • truncateToFit

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

19 Responses to Displaying item tool tips in a Flex ComboBox control

Chandra Kumar says:

July 4, 2008 at 7:55 am

I tried the first example on this page using “mx.controls.Text” for the “itemRenderer” property of ComboBox. I neither got a tooltip nor found the contents to be wrapped around. I am learning Flex. Your comments would be helpful to me.

Reply

peterd says:

July 4, 2008 at 2:18 pm

Chandra Kumar,

Try something like the following instead:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
        <mx:Object label="Donec sit amet dui nec pede aliquam auctor." />
        <mx:Object label="Integer vestibulum sodales dui." />
        <mx:Object label="Sed nonummy ligula et tortor." />
        <mx:Object label="Aenean varius neque vel felis." />
        <mx:Object label="Phasellus venenatis ipsum sit amet nisi." />
        <mx:Object label="Nullam vitae turpis et ipsum cursus venenatis." />
        <mx:Object label="Pellentesque tincidunt pede non arcu." />
        <mx:Object label="Aliquam ut massa quis ante dignissim egestas." />
        <mx:Object label="Curabitur facilisis velit sit amet metus." />
        <mx:Object label="Vivamus ornare massa ac massa." />
        <mx:Object label="Nam accumsan rutrum purus." />
    </mx:Array>

    <mx:ComboBox id="cb"
            dataProvider="{arr}"
            width="250"
            open="cb.dropdown.variableRowHeight = true;">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Text selectable="false" toolTip="{data.label}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>

</mx:Application>

Peter

Chandra Kumar says:

July 5, 2008 at 2:29 am

Peter,
Thank you. I followed the solution given by you. It works fine.

Chandra Kumar

Reply
Chandra Kumar says:

July 7, 2008 at 5:26 am

Peter,
I wonder how mx.controls.TextInput control would be used as an item renderer for mx.controls.ComboBox control.

Chandra Kumar

Reply
rosen jiang says:

November 10, 2008 at 2:54 am

Well, if some one want create ComboBox by Constructor. Please use:

var combo:ComboBox = new ComboBox();
combo.x = 3;
combo.y = 40;
combo.width = 138;
combo.itemRenderer = new ClassFactory(mx.controls.Label);
……..

best,
rosen

Reply
sabeerdeen says:

December 13, 2009 at 7:47 pm

how to make arraylist items as tool tip for combobox items?
arraylist items[one ,two ,three, four, five]
combobox items[1,2,3,4,5]
eg:
if combobox item is 1 ,then the tool tip should be one
if combobox item is 2 ,then the tool tip should be two

Reply
- Peter deHaan says:
  
  December 13, 2009 at 11:10 pm
  
  @sabeerdeen,
  
  I’d probably just listen for the change event on the ComboBox control and dynamically set the toolTip property based on the currently selected item.
  
  Peter
  
  Reply
Lion says:

April 22, 2010 at 7:15 pm

thank you so much , it is helpful for me!

Reply

Shif says:

May 27, 2010 at 8:48 am

How can I use the tooltip on the combo itself with the context of the selected option?
Whats the syntax? Any solution would be helpful.

Peter deHaan says:

May 27, 2010 at 12:51 pm

@Shif,

This may depend largely on how your data provider is set up, but this should work for simpler cases:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ComboBox id="cBox"
            dataProvider="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]"
            toolTip="{cBox.selectedItem}" />
 
</mx:Application>

For more complex data providers, you can probably do something similar to the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ComboBox id="cBox"
            labelField="lbl"
            updateComplete="cBox.toolTip = cBox.selectedLabel;">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object lbl="One" />
                <mx:Object lbl="Two" />
                <mx:Object lbl="Three" />
                <mx:Object lbl="Four" />
                <mx:Object lbl="Five" />
                <mx:Object lbl="Six" />
                <mx:Object lbl="Seven" />
                <mx:Object lbl="Eight" />
                <mx:Object lbl="Nine" />
                <mx:Object lbl="Ten" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:ComboBox>
 
</mx:Application>

Peter

Shif says:

May 30, 2010 at 3:44 am

Thanx Peter, this worked:
toolTip=”{cBox.selectedItem.displayName}”

Reply

av says:

June 24, 2010 at 1:37 pm

How can I truncate labels for each column in a combobox that shows 3 different columns formatted such that the second and third columns start from a given position.?

Peter deHaan says:

June 24, 2010 at 3:41 pm

@av,

I really don’t think you could. You may want to look at using a PopUpButton and maybe a DataGrid and using truncation on each of the columns. Maybe something like “Using a DataGrid control as a pop up in the Flex PopUpButton control” and then hide the DataGrid column headers (“Toggling a Flex DataGrid control’s header row”). Then I think you can do the per-column truncation in the DataGrid by setting the item renderer to an MX Label control and setting the Boolean truncateToFit property to true (“Truncating text in the Flex Label control using the truncateToFit property”).

Or that’s my theory.

Peter

Reply

Peter deHaan says:

June 24, 2010 at 3:59 pm

Actually, something like this should work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        backgroundColor="white">
 
    <mx:PopUpButton id="pUB"
            label="{dGrid.selectedItem.col1}"
            width="300" >
        <mx:popUp>
            <mx:DataGrid id="dGrid"
                    alternatingItemColors="[white,white]"
                    fontWeight="normal"
                    itemRenderer="mx.controls.Label"
                    showHeaders="false"
                    verticalGridLines="false"
                    width="{pUB.width}">
                <mx:columns>
                    <mx:DataGridColumn dataField="col1" />
                    <mx:DataGridColumn dataField="col2" />
                    <mx:DataGridColumn dataField="col3" />
                </mx:columns>
                <mx:dataProvider>
                    <mx:ArrayCollection>
                        <mx:Object col1="1a) The quick brown fox jumps over the lazy dog"
                                   col2="1b) The quick brown fox jumps over the lazy"
                                   col3="1c) The quick brown dog jumps over the" />
                        <mx:Object col1="2a) The quick brown fox jumps over the lazy dog"
                                   col2="2b) The quick brown fox jumps over the lazy"
                                   col3="2c) The quick brown dog jumps over the" />
                        <mx:Object col1="3a) The quick brown fox jumps over the lazy dog"
                                   col2="3b) The quick brown fox jumps over the lazy"
                                   col3="3c) The quick brown dog jumps over the" />
                        <mx:Object col1="4a) The quick brown fox jumps over the lazy dog"
                                   col2="4b) The quick brown fox jumps over the lazy"
                                   col3="4c) The quick brown dog jumps over the" />
                        <mx:Object col1="5a) The quick brown fox jumps over the lazy dog"
                                   col2="5b) The quick brown fox jumps over the lazy"
                                   col3="5c) The quick brown dog jumps over the" />
                        <mx:Object col1="6a) The quick brown fox jumps over the lazy dog"
                                   col2="6b) The quick brown fox jumps over the lazy"
                                   col3="6c) The quick brown dog jumps over the" />
                        <mx:Object col1="7a) The quick brown fox jumps over the lazy dog"
                                   col2="7b) The quick brown fox jumps over the lazy"
                                   col3="7c) The quick brown dog jumps over the" />
                        <mx:Object col1="8a) The quick brown fox jumps over the lazy dog"
                                   col2="8b) The quick brown fox jumps over the lazy"
                                   col3="8c) The quick brown dog jumps over the" />
                        <mx:Object col1="9a) The quick brown fox jumps over the lazy dog"
                                   col2="9b) The quick brown fox jumps over the lazy"
                                   col3="9c) The quick brown dog jumps over the" />
                    </mx:ArrayCollection>
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:popUp>
    </mx:PopUpButton>
 
</mx:Application>

Peter

Sabeerdeen says:

July 2, 2010 at 12:29 am

Hi.. help me to find the solution for my problem
datagrid column should be embed with an image along with the datafield and if datafield length exceeds then tool tip should come if length not exceeded theree should not be tooltip..

Reply
Vanessa says:

September 13, 2010 at 8:37 am

So simple, yet works like a charm… Thanks! I was thinking of doing it the long way i.e. listening for change and calling a function to set the tool tip etc. You saved me a lot of time.

Reply
devesh says:

April 11, 2011 at 6:30 am

Hi,
I need to use tooltip long name of clients, but in my case i need to implement multiple checkbox also. So i am using different itemRenderer of my own. Now i want to ask you how can i implement this feature of tool tip in my code.

Reply
devesh says:

April 11, 2011 at 6:31 am

Hi,
I need to use tooltip long name of clients, but in my case i need to implement multiple checkbox also. So i am using different itemRenderer of my own. Now i want to ask you how can i implement this feature of tool tip in my code.

Reply
Adriano says:

September 16, 2011 at 10:08 am

Saudações Sr. Peter

Seus códigos tem sido de extrema ajuda

Obrigado!

Reply