直接显示ToolTip和errorTip（不需要将鼠标移到组件上）

2008-05-25 [455] technology as3 flex validator

在使用mx.validator包的时候，我一直都希望检测没有通过的错误信息能够直接显示出来，而不是等我把鼠标移动到没有通过的组件上再显示。我认为这能带给用户更好的体验。因为用户能在第一时间就知道自己到底填错了什么，况且，并不是所有的用户都知道必须把鼠标移动到出错的组件上才能看到错误信息的。很多用户在控件的边框变红，并且不能够继续提交之后不知所措。（我认为，那个红色并不明显，还不至于让用户知道必须把鼠标移动到组件上去，尤其是在页面中的组件相当多的时候……）

今天翻看Flex 3的帮助，找到了解决的办法。

关键在于ToolTipManager类的使用。使用ToolTipManager类的createToolTip方法可以直接生成一个ToolTip进行显示。语法很简单，只需要指定要显示的文字，x、y值即可。如果坐标值是基于组件的，则需要使用localToGlobal来转换坐标系。

一个有趣的地方是ToolTip的箭头方向。createToolTip的第4个参数是指定箭头。如果为空，就不显示箭头。如果为下面三个字符串值中的一个，则会显示箭头：

  • errorTipAbove
  • errorTipRight
  • errotTipBelow

是的，没有 errorTipLeft。

另一个有趣的地方是关于ToolTip的样式。对于createToolTip生成的ToolTip，可以用ToolTip选择符控制它的样式。但是这还取决于createToolTip的第4个参数。如果这个参数有值，那么就必须使用.errorTip这个css类来控制它的样式了。

1.errorTip
2{
3    font-size: 12;
4}

.errorTip会影响Validator的样式，所以，可以重新定义专有样式，并在生成toolTip的时候赋值给它。

1.testTip
2{
3    font-size: 12;
4    border-color: #ffffdd;
5    color: #ff0000;
6    font-weight: bold;
7}
8_tip.styleName = 'testTip';

createToolTip生成的ToolTip，必须用destoryToolTip来清除。如果在清楚之前再次调用createToolTip，则会生成重复的ToolTip。ToolTipManager有一个currentToolTip属性来保存当前显示的ToolTip，但这个属性对于使用createToolTip创建的ToolTip并没有效果。因此还是老老实实的在生成的时候用变量把它保存下来把。

源码：

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="150" horizontalAlign="center" verticalAlign="middle">
 3    <mx:Style>
 4        global
 5        {
 6            font-size: 12;
 7            theme-color: haloSilver;            
 8        }
 9        Application
10        {
11            background-color: #dddddd;  
12        }
13        .errorTip
14        {
15            font-size: 12;
16        }
17        .testTip
18        {
19            font-size: 12;
20            border-color: #ffffdd;
21            color: #ff0000;
22            font-weight: bold;
23        }
24    </mx:Style>
25    <mx:Script>
26        <![CDATA[
27            import mx.managers.ToolTipManager;
28            import mx.controls.ToolTip;
29                    
30            private var _tip:ToolTip;
31            
32            private function _showTip($txt:String):void
33            {
34                trace(_tip);
35                if(_tip == null)
36                {
37                    var __point:Point = new Point(emailTI.x, emailTI.y);
38                    trace(__point)
39                    __point = emailTI.localToGlobal(__point);
40                    trace(__point);
41                     _tip = ToolTipManager.createToolTip(   $txt,
42                                                            __point.x - emailTI.x, 
43                                                            __point.y - 40 ,
44                                                            'errorTipAbove') as ToolTip;
45                     _tip.styleName = 'testTip';
46                }
47            }
48            
49            private function _destoryTip():void
50            {
51                if(_tip)
52                {
53                    ToolTipManager.destroyToolTip(_tip);
54                }
55                _tip = null;
56            }
57        ]]>
58    </mx:Script>
59    <mx:EmailValidator id="emailV" source="{emailTI}" property="text" trigger="{btn}" triggerEvent="click"/>
60    <mx:Form horizontalCenter="0">
61        <mx:FormItem label="电子邮件：" width="100%">
62            <mx:TextInput id='emailTI' width="100%"/>
63        </mx:FormItem>
64        <mx:FormItem horizontalAlign="center" width="100%" direction="horizontal">
65            <mx:Button id="btn" label="提交"/>
66            <mx:Button id='btn2' label="显示Tip" click="_showTip('测试弹出Tip')"/>
67            <mx:Button id='btn3' label="取消Tip" click="_destoryTip()"/>
68        </mx:FormItem>      
69    </mx:Form>
70</mx:Application>

范例效果：

请使用下面的链接升级 Flash Player 到最新版本：

安装最新的Flash Player插件