Changing the background color of an error tip in Flex

The following example shows how you can change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .errorTip {
            borderColor: haloOrange;
            color: black;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontWeight: normal;
        }

        TextInput {
            errorColor: haloOrange;
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            errorString="Hey, you missed a spot!" />

</mx:Application>

View source is enabled in the following example.

For an example of setting the .errorTip selector’s borderColor style dynamically using ActionScript, see “Dynamically styling error tips in Flex”.

15 thoughts on “Changing the background color of an error tip in Flex

  1. I love your blog, I read it everyday… dont ever stop posting little examples :) If you plan on blunde this in a book or something, IM BUYING IT

  2. I have to agree with Raul. I have a library of Flex books from various authors and blogs I read on a regular basis, but this is by far the most useful source of information regarding Flex I have found. Book idea is great!

  3. Thanks guys,

    There aren’t any plans on releasing this as a book. I figure it is free now, and a lot more interactive and searchable as a blog. Plus, you’d miss out on all the handy SWF files, unless the book had a companion CD/website, which basically brings us right back to where we started.

    Peter

    But don’t let me stop you though, feel free to print off as many entries as you want and staple them together on your desk. :)

  4. Hello Peter,
    Well, after having visited your website, I am sure that there is not a lot of blogs on the Web which contain as many technical informations and codes for Flex as yours. Thank you very much for that

  5. Was it nessisary to set the errorColor of the TextInput, or is setting the borderColor on the error tip not enough to change the color of the error tip itself?

  6. any way to have a separate color for the border of the tooltip, so say red border, light yellow background ?

  7. superabe,

    I don’t know of an easy way off the top of my head. But I’m sure you could make a custom skin or something which would do what you need. You’d have better luck asking on FlexCoders.

    Sorry,
    Peter

  8. Honestly, I hate agree, I love this blog’s little teaching, simple, straight to the point and gets the task done!!

    Thanks Peter!

  9. Sorry i made this post in another thread, but i posted here because i think it belongs more with the topic

    Hi, i was wondering, how would you change dynamically the errorTip color?

    I want to set warnings and errors.
    Warnings being yellow & errors red.

    Ive been trying to set

    errorTip {
        borderColor: #FF0000;
    }
    

    and then programatically change it to say

    warnTip {
        borderColor #FFCC00;
    }
    

    But i dont know what to set it to.
    I was changing the whole TextInput style, so it would also change the errorColor respectively, and that works fine.

    Yet i dont know how to change the errorTip, since i dont know to what element to apply the .styleName to

    and applying it to the input as

    setStyle("errorTip.borderColor", "#FFCC00")
    

    or

    setStyle("errorTip", "#FFCC00")
    

    dont seem to work either.

    Any clues?

  10. sorry for filling your forums, just found the answer for my own question.
    In yet another thread peted shows us how to Use embedded fonts with tool tips in Flex

    And here i found my answer, yet it wasnt as straith forward as i would’ve wanted.
    In the validation i set a flag with either the status of warning, error

    Also when i initialize my Textinput i add an event listener like this

    myTxt.addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, textInput_toolTipShown);
    

    finally on the event listener i check for my flag

    private function textInput_toolTipShown(evt:ToolTipEvent):void {
        var tt:ToolTip = evt.toolTip as ToolTip;
        if (errorState) {
            myTxt.setStyle("errorColor", "#FF0000");
            tt.setStyle("borderColor","#FF0000");
        } else {
            tt.setStyle("borderColor","#FFCC00");
            myTxt.setStyle("errorColor", "#FFCC00");
        }
    }
    

    I’m posting it so if anyone has the same problem theres some reference of how i did it
    also if u have a better solution it be great to see it.

    Regards,

  11. How do you control the position of the error? Like alwyays force the error message to pop up from the left instead of the top.

    Also, how do you control the position of the arrow that is part of the border?

Comments are closed.