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.
<?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”.
{ 13 comments… read them below or add one }
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
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!
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. :)
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
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?
any way to have a separate color for the border of the tooltip, so say red border, light yellow background ?
Tony Fendall,
Setting the
borderColoris enough. I just set theerrorColorstyle so the colors would match (by default theerrorColorseems to be red (#FF0000)).Peter
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
Honestly, I hate agree, I love this blog’s little teaching, simple, straight to the point and gets the task done!!
Thanks Peter!
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
errorTipcolor?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
errorColorrespectively, and that works fine.Yet i dont know how to change the
errorTip, since i dont know to what element to apply the .styleName toand applying it to the input as
setStyle("errorTip.borderColor", "#FFCC00")or
setStyle("errorTip", "#FFCC00")dont seem to work either.
Any clues?
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
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,
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”
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?