Customizing a Flex ToolTip instance’s appearance using styles

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.

12 thoughts on “Customizing a Flex ToolTip instance’s appearance using styles

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

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

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

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

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

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

    1. @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

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

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

Comments are closed.