The following example shows how you can customize the appearance of the Flex ToolTip using a <mx:Style /> block.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/01/customizing-a-flex-tooltip-instances-appearance-using-styles/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
ToolTip {
backgroundColor: black;
backgroundAlpha: 1.0;
cornerRadius: 0;
color: white;
}
</mx:Style>
<mx:Button label="Roll over to see tool tip"
toolTip="The quick brown fox jumped over the lazy dog." />
</mx:Application>
View source is enabled in the following example.

{ 11 comments… read them below or add one }
Thanks! This was quite helpful. I was wondering if there was an easy way to style tooltips, and this is about as easy as it gets!
Thanks. Does this apply automatically to validator error messages such as requiredFieldError, invalidCharError, and invalidNumberError. I have found that it doesn’t.
Hi,
This is good but i have need of to customize the background image of the tooltip.
if anyone has idea about it then plese tell me.
Thanks
neat stuff. How do I change the position of the tooltip? I’m building some video player controls and I want the tool tip to sit above the main interface elements – pause/play etc. I really can’t find how to do this. Any help would be really appreciated.
Hi,
This helped me.But i would like to know how to set css for email validator’s tooltip.
Thanks in advance.
@Reny,
You could try one of these and see if they do what you need: “Dynamically styling error tips in Flex” and/or “Changing the background color of an error tip in Flex”.
Peter
Thanks Peter for your quick reply..i will try in that way…One more i thing, can you suggest me any sites providing flex componets..i am looking for the css style mainly..
Reny
@Reny,
There is a Flex Exchange on Adobe.com which may have some free/commercial components: “Adobe – Flex Exchange”. Apart from that, you can try Google.com or ask on the FlexCoders mailing list.
Peter
Your example styling doesn’t work if you set tooltips programticaly.
Eg:
myButton.toolTip = “Here is my tooltip”;
How do you use the Styles in this case? Any suggestion?
thanks
@Adrian,
These all work for me:
Peter
Hi i want to change toolTip style like borderThickness or border color in run time for concret tooltip… but there are some problem all border and background dissapear when i in toolTipShown event try to apply those styles… can you help me