Displaying item tool tips in a Flex ComboBox control

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 as: itemRenderer, truncateToFit