Customizing a Flex ToolTip instance’s appearance using styles

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

1. Steve Kwan says:

   January 23, 2008 at 11:43 am

   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!

   Reply
2. arisco97 says:

   June 23, 2008 at 11:18 am

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

   Reply
3. ajay kumar says:

   December 29, 2008 at 2:08 pm

   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

   Reply
4. sci says:

   July 21, 2009 at 8:52 am

   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.

   Reply
5. Reny says:

   November 26, 2009 at 2:02 am

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

   Reply
   • Peter deHaan says:

     November 26, 2009 at 11:59 am

     @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

     Reply
     • Reny says:

       November 26, 2009 at 8:24 pm

       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
     • Peter deHaan says:

       November 26, 2009 at 10:23 pm

       @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
6. Adrian says:

   December 7, 2009 at 5:03 am

   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

   Reply
   • Peter deHaan says:

     December 7, 2009 at 7:09 am

     @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

     Reply
7. Vitalik says:

   March 19, 2010 at 10:45 am

   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

   Reply
8. Nirav says:

   March 2, 2011 at 2:58 pm

   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.

   Reply