Customizing a Flex ToolTip instance’s appearance using styles

by Peter deHaan on September 1, 2007

in Styles, ToolTip

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 as:

{ 10 comments… read them below or add one }

1 Steve Kwan 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 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 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 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 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

6 Peter deHaan 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

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

8 Peter deHaan 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

9 Adrian 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

10 Peter deHaan 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

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: