Flex 4 - How to set errorTip in FormItem?

Question

I am the new one for flex 4. In my sample application, I am using validator. It display's the error message and icon at beside's of the control. My question is, How to remove these error message and error icon? And I want to display my error message as a errorTip when the mouse is over the particular control.

Thank you.

Edit

My sample code. I am using this with some other controls

<fx:Declarations>
    <mx:StringValidator id="nameValidator"
                        source="{employeeName}"
                        property="text"
                        tooLongError="Too long error"
                        tooShortError="Too short error"
                        maxLength="20" minLength="4"/>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>                        
                <s:TextInput id="employeeName"/>                        
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput id="employeeID"/>                      
            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

This code display the error message with error icon.

And

<fx:Declarations>
    <mx:StringValidator id="nameValidator"
                        source="{employeeName}"
                        property="text"
                        tooLongError="Too long error"
                        tooShortError="Too short error"
                        maxLength="20" minLength="4"/>

</fx:Declarations>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>                    
            <s:TextInput id="employeeName" />
            <s:TextInput id="employeeID" />
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

This code doesn't display the error icon and error message. And it display only the error tip when mouse is over the TextInput control. I want this error tip for my code.

Update

        <mx:StringValidator
        id="userName"
        source="{employeeName}"
        property="text"
        minLength="4" maxLength="20"
        triggerEvent="rollOver"
        trigger="{employeeName}"/>
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<mx:HDividedBox>
    <s:Panel>
        <s:Form>
            <s:FormItem>    
                <mx:HBox>   
                <s:TextInput id="employeeName"/>
                                </mx:HBox>                      
            </s:FormItem>
            <s:FormItem>                        
                <s:TextInput id="employeeID"/>                      
            </s:FormItem>
        </s:Form>
    </s:Panel>
</mx:HDividedBox>

Now I did this.

My Current Output is first picture , And the second one is I need:

Answer 1

You have to override and modify the default FormItemSkin.mxml to do it.

1. Remove the errorTextDisplay component

   <s:RichText id="errorTextDisplay" includeIn="errorStates"
           fontStyle="italic" fontWeight="normal" color="0xFE0000"
           left="helpCol:27" right="helpCol:10"
           bottom="row1:5" baseline="row1:0" 
           maxDisplayedLines="-1"/> 
   

2. Set contentGroup showErrorTip to true

   <!-- Don't show the error tip on the content elements -->
   <s:Group id="contentGroup" showErrorTip="true" showErrorSkin="true"
        left="contentCol:0" right="contentCol:1" 
        baseline="row1:0" bottom="row1:5">
   

Refer these links.

link 1 and Link 2

I am sure, It will help you