1. Home
2. Developer Connection
3. Flex Developer Center
4. Flex Quick Start

Flex Quick Starts: Building a simple user interface

Table of contents

• Using controls
• Using containers
• Styling your components
• Adding effects
• Creating states
• Defining state transitions
• Using tooltips
• Controlling the cursor

Using tooltips

Adobe® Flex™ ToolTips let you provide helpful information to your users. When a user moves the mouse pointer over graphical components, ToolTips pop up containing textual information. You can use ToolTips to guide users through working with your application or customize them to provide additional functionality.

Every visual Flex component that extends the UIComponent class (which implements the IToolTipManagerClient interface) supports the toolTip property. You set the value of the toolTip property to a text string and, when the mouse pointer hovers over that component, the text string appears.

There is no limit to the size of the ToolTip text, although long messages can be difficult to read. When the ToolTip text reaches the width of the ToolTip box, the text wraps to the next line. You can add line breaks in ToolTip text. In ActionScript, you use the \n escaped newline character. In MXML tags, you use the 
 XML entity.

You can change the appearance of ToolTip text and the ToolTip box by using Cascading Style Sheets (CSS) syntax or the mx.styles.StyleManager class. Changes to ToolTip styles apply to all ToolTips in the current application.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/UsingTooltips/index.html"
    width="400" height="170"
>
    <mx:Style>
        ToolTip 
        {
            fontFamily: "Arial";
            fontSize: 19;
            fontStyle: "italic";
            color: #FFFFFF;
            backgroundColor: #33CC99;
        }
    </mx:Style>

    <mx:Panel 
        title="Using ToolTips" 
        toolTip="Child components without &#13; ToolTips will inherit this." 
    >    
        <mx:Form>    
            <mx:FormItem label="Button with tooltip:">
                <mx:Button label="Roll over me!" toolTip="You can click me too!" />        
            </mx:FormItem>

            <mx:FormItem label="Button without tooltip:">
                <mx:Button label="I'm unoriginal" />        
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>    

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

For more information

• Using ToolTips in the Adobe Flex 3 Help

About the author