Setting a custom tool tip field on a ButtonBar control in Flex

The following example shows how you can specify a custom field to be used for a tool tip in a Flex ButtonBar control by setting the toolTipField property.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_toolTipField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Array id="arr">
        <mx:Object label="Accordion"
                toolTip="Le Accordion"
                icon="@Embed('assets/Accordion.png')" />
        <mx:Object label="ApplicationControlBar"
                toolTip="Le ApplicationControlBar"
                icon="@Embed('assets/ApplicationControlBar.png')" />
        <mx:Object label="Box"
                toolTip="Le Box"
                icon="@Embed('assets/Box.png')" />
        <mx:Object label="Canvas"
                toolTip="Le Canvas"
                icon="@Embed('assets/Canvas.png')" />
        <mx:Object label="ControlBar"
                toolTip="Le ControlBar"
                icon="@Embed('assets/ControlBar.png')" />
    </mx:Array>
 
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            labelField="label"
            toolTipField="toolTip"
            iconField="icon"
            height="32" />
 
</mx:Application>

View source is enabled in the following example.

4 thoughts on “Setting a custom tool tip field on a ButtonBar control in Flex

  1. Thanks for the tooltip tip.

    Please consider an example that increases the buttonbar’s selected button. The skin color border hilighting isn’t enough contrast. I can’t figure out how to change the style of the selected button. I may have to use different icons in the provider.

  2. Craig Hollabaugh,

    Does this work for you:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Style>
            .allButtons4 {
                /* Creates a gradient from red/orange when button is in the
                   "out" state. Creates a gradient from green/blue when
                   button is in the "over" state. */
                fillColors: red, haloOrange, haloGreen, haloBlue;
                fillAlphas: 1.0, 0.6, 1.0, 0.6;
    
                color: white;
                textRollOverColor: white;
            }
        </mx:Style>
    
        <mx:ButtonBar id="buttonBar" buttonStyleName="allButtons4">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="Button" />
                    <mx:Object label="ButtonBar" />
                    <mx:Object label="CheckBox" />
                    <mx:Object label="ColorPicker" />
                    <mx:Object label="ComboBox" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ButtonBar>
    
    </mx:Application>
    

    Modified slightly from, “Changing the fill colors of a ButtonBar control in Flex”.

    I don’t believe a ButtonBar control has a “selected button”, per se. You may want to use the ToggleButtonBar instead. For more examples on the ToggleButtonBar control, see the ToggleButtonBar category archive.

    Peter

  3. Peter,
    Thanks for the add-on example. You are correct, I meant a ToggleButtonBar in my comment above. I checked your ToggleButtonBar category, you’re using the default skin hilighting (a little blue border and shade darker background). Is is possible to change the background for the selected button? The flex docs mention selectedButtonTextStyleName but nothing about selectedButtonStyleName. I didn’t see anything in the ‘Style Explorer’ either.

    Thanks for your help. I read/compile/learn from your examples everyday.
    Craig

Comments are closed.