Using error tips

Using error tips

Error tips are instances of the ToolTip class that get their styles from the errorTip class selector. They are most often seen when the Flex validation mechanism displays a warning when data is invalid. But you can use the definitions of the errorTip style and apply it to ToolTips to create a custom validation warning mechanism.

The styles of an error tip are defined in the defaults.css file, which is in the framework.swc file. It specifies the following default settings for errorTip (notice the period preceding errorTip, which indicates that it is a class selector):

.errorTip {
    color: #FFFFFF;
    fontSize: 9;
    fontWeight: "bold";
    shadowColor: #000000;
    borderColor: #CE2929;
    borderStyle: "errorTipRight";
    paddingBottom: 4;
    paddingLeft: 4;
    paddingRight: 4;
    paddingTop: 4;
}

You can customize the appearance of error tips by creating a new theme that overrides these styles, or by overriding the style properties in your application. For more information on creating themes, see About themes.

You can create ToolTips that look like validation error tips by applying the errorTip style to the ToolTip. The following example does not contain any validation logic, but shows you how to use the errorTip style to create ToolTips that look like validation error tips. When you run the example, press the Enter key after entering text into the TextInput controls.

<?xml version="1.0"?>
<!-- tooltips/ErrorTipStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">
  <mx:Script><![CDATA[
     import mx.controls.ToolTip;
     import mx.managers.ToolTipManager;
     
     private var errorTip:ToolTip;
     private var myError:String;
  
     private function validateEntry(type:String, event:Object):void {
        // NOTE: Validation logic would go here.
        switch(type) {
           case "ssn":
            myError="Use SSN format (NNN-NN-NNNN)";
            break;
           case "phone":
            myError="Use phone format (NNN-NNN-NNNN)";
            break;
        }
        // Use the target's x and y positions to set position of error tip.
        errorTip = ToolTipManager.createToolTip(myError,event.currentTarget.x + event.currentTarget.width,event.currentTarget.y) as ToolTip;
     
        // Apply the errorTip class selector.
        errorTip.setStyle("styleName", "errorTip");
     }
  ]]></mx:Script>

  <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>
  <mx:TextInput id="phone" enter="validateEntry('phone',event)"/>
</mx:Application>

Another way to use error tips is to set the value of the errorString property of the component. This causes the ToolTipManager to create an instance of a ToolTip and apply the errorTip style to that ToolTip without requiring any coding on your part.

The following example shows how to set the value of the errorString property to create an error tip:

<?xml version="1.0"?>
<!-- tooltips/ErrorString.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">
  <mx:Script><![CDATA[
     import mx.controls.ToolTip;
     import mx.managers.ToolTipManager;
     
     private var errorTip:ToolTip;
     private var myError:String;
  
     private function validateEntry(type:String, event:Object):void {
        // NOTE: Validation logic would go here.
        switch(type) {
           case "ssn":
            myError="Use SSN format";
            break;
           case "phone":
            myError="Use phone format";
            break;
        }

        event.currentTarget.errorString = myError;

     }
  ]]></mx:Script>

  <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>
  <mx:TextInput id="phone" enter="validateEntry('phone',event)"/>
</mx:Application>

You can also specify that the ToolTipManager creates an error tip when you call the createToolTip() method by specifying the value of the errorTipBorderStyle property, as the following example shows:

<?xml version="1.0"?>
<!-- tooltips/CreatingErrorTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
  import mx.managers.ToolTipManager;
  import mx.core.IToolTip;

  public var myTip:IToolTip;

  private function createBigTip(event:Event):void {
     var myError:String = "These buttons let you save, exit, or continue with the current operation."
     myTip = ToolTipManager.createToolTip(myError, event.currentTarget.x + event.currentTarget.width, event.currentTarget.y, "errorTipRight");
  }

  private function destroyBigTip():void {
     ToolTipManager.destroyToolTip(myTip);
  }
  
  ]]></mx:Script>
  <mx:Panel rollOver="createBigTip(event)" rollOut="destroyBigTip()">
     <mx:Button label="OK" toolTip="Save your changes and exit."/>
     <mx:Button label="Apply" toolTip="Apply changes and continue."/>
     <mx:Button label="Cancel" toolTip="Cancel and exit."/>
  </mx:Panel>
</mx:Application>