flex设置异常提示ToolTip样式及创建自定义ToolTip

flex设置错误提示ToolTip样式及创建自定义ToolTip

1. 直接在样式文件css中设置：

.errorTip
{
    font-size: 12;
}

flex会自动应用errorTip所设置的样式


2. 自定义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