You can apply a programmatic skin to ToolTip controls.

ToolTip skins are defined by the ToolTipBorder programmatic skin. This file is located in the mx.skins.halo package.

To reskin ToolTips, you edit the ToolTipBorder class file, and then apply the new skin to the ToolTip by using CSS. For more information on skinning, see Creating Skins.

Reskin ToolTips by using CSS

1. Open the mx.skins.halo.ToolTipBorder.as file. This file is included with the source files, as described in Skin resources.
2. Save the ToolTipBorder.as file under another name, and in a different location. The filename must be the same as the new class name.
3. Change the package from mx.skins.halo to your package name, or to the empty package, as the following example shows:

   //package mx.skins.halo { // Old package name
   package { // New, empty package
   
   

4. Change the class name in the file, as the following example shows:

   //public class ToolTipBorder extends RectangularBorder // Old name
   public class MyToolTipBorder extends RectangularBorder // New name
   
   

5. Change the constructor to reflect the new class name, as the following example shows:

   //public function ToolTipBorder() // Old constructor
   public function MyToolTipBorder() // New constructor
   
   

6. Comment out the versioning line, as the following example shows:

   //include "../../core/Version.as";
   
   

7. Edit the class file to change the appearance of the ToolTip. You do this by editing the "toolTip" case in the updateDisplayList() method. That is the method that draws the ToolTip's border and sets the default styles. Most commonly, you change the arguments of the drawRoundRect() method to change the appearance of the ToolTip.

   The following example adds a red tinge to the background of the ToolTip's box by replacing the default backgroundColor property with an array of colors:

   var highlightAlphas:Array = [0.3,0.0];
   drawRoundRect(3, 1, w-6, h-4, cornerRadius, [0xFF0000, 0xFFFFBB],
       backgroundAlpha);
   
   

   The values of the cornerRadius and backgroundAlpha properties that are shown in the previous code snippet are set earlier in the updateDisplayList() method.

8. Save the class file.
9. In your Flex application, edit the ToolTip's borderSkin style property to point to the new skin. You can do this in an <mx:Style> tag inside your application, or by using external CSS file or a custom theme file. The following example sets the borderSkin property to the new skin class:

   <?xml version="1.0"?>
   <!-- skins/ApplyCustomToolTipSkin.mxml -->
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Style>
        ToolTip {
           borderSkin: ClassReference("MyToolTipBorder");
        }
     </mx:Style>
   
     <mx:Button id="b1" label="Click Me" toolTip="Click this button"/>
   </mx:Application>
   
   

   You must specify the full package name in the CSS reference. In this example, the file MyToolTipBorder.as is in an empty package and, therefore, has no package designation such as mx.skins.halo.

10. Compile and run the application with the new skin file in the source path. You do this by setting the value of the compiler's source-path option.

    If the skin class is in the same directory as the application, you do not have to add its location to the source path. The current directory is assumed. For more information, see Using the Flex Compilers.