The following example shows how you can customize the appearance of the Flex ToolTip using a <mx:Style /> block.

Full code after the jump.

View MXML

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

 
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.

12 Responses to Customizing a Flex ToolTip instance’s appearance using styles

  1. Steve Kwan says:

    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!

  2. arisco97 says:

    Thanks. Does this apply automatically to validator error messages such as requiredFieldError, invalidCharError, and invalidNumberError. I have found that it doesn’t.

  3. ajay kumar says:

    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

  4. sci says:

    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.

  5. Reny says:

    Hi,
    This helped me.But i would like to know how to set css for email validator’s tooltip.
    Thanks in advance.

  6. Adrian says:

    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

    • Peter deHaan says:

      @Adrian,

      These all work for me:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      creationComplete="init();">
       
          <mx:Style>
              ToolTip {
                  backgroundColor: black;
                  backgroundAlpha: 1.0;
                  cornerRadius: 0;
                  color: white;
              }
          </mx:Style>
       
          <mx:Script>
              <![CDATA[
                  private var btn2:Button;
       
                  private function init():void {
                      btn2 = new Button();
                      btn2.label = "AS button w/ AS toolTip";
                      btn2.toolTip = "Foo bar 2";
                      addChild(btn2);
                  }
              ]]>
          </mx:Script>
       
          <mx:Button label="Roll over to see tool tip"
                     toolTip="The quick brown fox jumped over the lazy dog." />
          <mx:Button id="btn" label="MXML button w/ AS toolTip" creationComplete="btn.toolTip = 'Foo bar';" />
       
      </mx:Application>

      Peter

  7. Vitalik says:

    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

  8. Nirav says:

    Is there a way to remove the drop-shadow from the tooltip? I tried setting the dropShadowEnabled property to false as well as setting the shadowDistance to 0, but neither work.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree