Changing the background color of an error tip in Flex

By On May 22, 2008 · 15 Comments

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”.

 
Tagged with: • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

15 Responses to Changing the background color of an error tip in Flex

  1. Raul Riera says:
    May 22, 2008 at 1:18 pm

    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. Steve Walker says:
    May 22, 2008 at 1:29 pm

    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. peterd says:
    May 22, 2008 at 1:45 pm

    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. Wilfried says:
    May 22, 2008 at 2:05 pm

    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. Tony Fendall says:
    May 22, 2008 at 5:02 pm

    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. superabe says:
    May 22, 2008 at 5:21 pm

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

  7. peterd says:
    May 22, 2008 at 9:15 pm

    Tony Fendall,

    Setting the borderColor is enough. I just set the errorColor style so the colors would match (by default the errorColor seems to be red (#FF0000)).

    Peter

  8. peterd says:
    May 22, 2008 at 9:17 pm

    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

  9. Joseph says:
    May 23, 2008 at 8:50 am

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

    Thanks Peter!

  10. Yon says:
    September 26, 2008 at 5:23 pm

    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?

  11. Yon says:
    September 26, 2008 at 6:39 pm

    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,

  12. peterd says:
    September 26, 2008 at 7:11 pm

    Yon,

    I don’t know that it is a “better” solution, but I posted another technique on the other entry: “Customizing a Flex TextInput control’s error color”

    I’ll probably try and convert my solution to a full blog entry later this evening when I get some time (if you wanted to hold out for a SWF and all that stuff).

    Peter

    New entry posted: “Dynamically styling error tips in Flex”

  13. t3 says:
    September 28, 2008 at 11:00 pm

    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?

  14. Nuwan says:
    June 15, 2010 at 10:27 am

    Thanks really helpful!

  15. Tarun says:
    November 1, 2011 at 3:17 am

    Thanks Peter,

    it is really helpful!