by Adobe

adobe_logo_bio

Created

23 March 2010

 Requirements
 
User level
Required products
All 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 &#13; 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>

 
For more information