Changing the background color of an error tip in Flex at Flex Examples

13 Responses to “Changing the background color of an error tip in Flex”

Feed for this Entry View blog reactions

1 Raul Riera May 22nd, 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 May 22nd, 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 May 22nd, 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 May 22nd, 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 May 22nd, 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 May 22nd, 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 May 22nd, 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 May 22nd, 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 May 23rd, 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 Sep 26th, 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 Sep 26th, 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 Sep 26th, 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 Sep 28th, 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?