How to make Flex validation message to appear above the field?

Question

Usually validation message appears right to input field: http://aralbalkan.com/wp-content/uploads/2008/01/better-flex-validation-errors.gif

But if there is not enough space to right, the message appears above.

How to make it always appear above? (regardless of free space etc.)

UPDATE

It would be great if I could leverage Flex built-in validation infrastructure (various Validator classes).

Example source code:

<mx:StringValidator
        id="nameValidator"
        source="{nameInput}"
        property="text"
        minLength="2"/>

<mx:Form>
    <mx:FormItem label="Name:">
        <mx:TextInput id="nameInput"/>
    </mx:FormItem>
</mx:Form>

Answer 1

Your question (your screen shot certainly does) seems to reference the code posted here: http://aralbalkan.com/1125, not flex build in features. Therefore I'd recommend just adjusting the positioning code posted there:

var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + " cannot be empty", pt.x + target.width + 5, pt.y) as ToolTip;

to say:

 var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + " cannot be empty", pt.x + 5, pt.y - 30) as ToolTip;

Answer 2

It seems it is impossible to do it in an elegant way with Flex 3 because:

Validators set UIComponent.errorString(...) property which in its turn calls ToolTipManager.registerErrorString(...) and this guy calls TooltipManagerImpl.positionTip(...) where tooltip localtion calculated regarding to component XY and screen dimensions. And this method doesn't take into account styles or hints, it just fits tooltip into the screen.

So hammer, file and self-invented validators are best friends here.