Using tooltips
Requirements
User level
All
Required products
- Flex (Download trial)
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 working with your application or customize ToolTips 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"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="300" height="170">
<s:layout>
<s:VerticalLayout paddingTop="20"
horizontalAlign="center"/>
</s:layout>
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ToolTip {
fontFamily: "Arial";
fontSize: 16;
fontStyle: "italic";
color: #FFFFFF;
backgroundColor: #33CC99;
}
</fx:Style>
<s:Panel title="Using ToolTips"
toolTip="Child components that do not specify a ToolTip inherit this tool tip.">
<mx:Form>
<mx:FormItem label="Button with tooltip:">
<s:Button label="Roll over me!" toolTip="You can click me too!" />
</mx:FormItem>
<mx:FormItem label="Button without tooltip:">
<s:Button label="I'm unoriginal" />
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
