Flex 3快速入门（12）: 构建简单的用户界面 使用工具提示Tooltiop

 

使用工具提示

Adobe® Flex™ ToolTip 使您能够为您的用户提供有帮助的信息。当用户在图形组件上移动鼠标指针时, 会弹出包含文本信息的工具提示。您可以使用工具提示来指导用户完成使用应用程序或自定义它们来提供其他功能。

扩展 UIComponent 类 (该类实现 IToolTipManagerClient 界面) 的每个可视 Flex 组件都支持 toolTip 属性。您将 toolTip 属性的值设置为一个文本字符串, 并且, 当鼠标指针悬停在该组件上时, 会显示该文本字符串。

尽管长消息很难读取, 但对工具提示文本的大小不存在任何限制。当工具提示文本达到工具提示框的宽度时, 文本会自动换至下一行。可以在工具提示文本中添加换行符。在 ActionScript 中, 您使用 \n 转义的新行字符。在 MXML 标签中, 您使用 
 XML 实体。

可以通过使用层叠样式表 (CSS) 语法或 mx.styles.StyleManager 类更改工具提示文本和工具提示框的外观。对工具提示样式的更改适用于当前应用程序中的所有工具提示。

示例

<?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&apos;m unoriginal" />       
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>   

</mx:Application>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。