Adding animations and effects to Flex tool tips

by Peter deHaan on September 4, 2007

The following example shows how you can add custom animation and effects when displaying a tool tip in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/04/adding-animations-and-effects-to-flex-tool-tips/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.managers.ToolTipManager;

            private function init():void {
                ToolTipManager.hideDelay = 2000;
                ToolTipManager.showEffect = rotate;
                ToolTipManager.hideEffect = zoom;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: url("./fonts/arial.ttf");
            fontFamily: "ArialEmbedded";
        }

        ToolTip {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>

    <mx:Rotate id="rotate" />
    <mx:Zoom id="zoom" />

    <mx:Button label="Roll over me to see tool tip"
            toolTip="The quick brown fox..." />

</mx:Application>

View source is enabled in the following example.

{ 15 comments… read them below or add one }

R3dsky September 5, 2007 at 6:27 am

Sweet,
simple and effective. Just what i need.
That made my day! :)

Reply

Ali September 5, 2007 at 6:51 am

When adding the FAder effect the font can’t be fade. Only the Tooltip background/ Border is transitioned.

Reply

peterd September 5, 2007 at 8:35 am

Ali,

When using the Fade effect, did you embed your font?

Peter

Reply

Myles September 6, 2007 at 8:12 am

The hide effect never seems to fire? The tool tip just disappears. It seems like it should zoom out based on the example code.

Reply

peterd September 6, 2007 at 9:50 am

Myles,

The tool tip should zoom out, but you have to hold your cursor over the button for about 2 seconds. If you click the button, the tool tip should disappear immediately without showing the hide effect.

Peter

Reply

Menon September 27, 2007 at 8:27 am

Hi,

Could you please let me know if I can use the same code in a MXML Component?
I am trying to give an animated tooltip effect for the buttons those are in a MXML component, not directly under .

Any help would be appreciated.

Thanks
Menon

Reply

Menon September 27, 2007 at 8:29 am

Sorry for the incomplete message above..

Could you please let me know if I can use the same code in a MXML Component?
I am trying to give an animated tooltip effect for the buttons those are in a MXML component, not directly under ” ”

Any help would be appreciated.

Thanks
Menon

Reply

peterd September 27, 2007 at 11:42 am

Menon,

Sorry, this blog eats all the HTML/XML unless you somehow escape the “<” with “&lt;” or “[” or something.

Can you repost your comment/question and I can edit/delete the ones above.

Peter

Reply

Maycon February 4, 2008 at 5:29 am

Is there a way to use a Bounce effect, to show the tooltip?

Reply

Nicole Rutter March 12, 2008 at 10:58 am

Nice thanks for the tip!

Reply

benjy April 23, 2008 at 6:07 am

great work.you’re the best man.ouahh

Reply

arisco97 June 23, 2008 at 11:22 am

The requiredFieldError and other error message styles do not take the color: from the tooltip style.

Reply

jimbo August 29, 2008 at 8:19 am

any idea how to get the toolTip’s hideEffect to play when you mouse off the element instead of just disappearing?

Reply

Martin February 23, 2009 at 3:57 am

i also would be interested to know how to play an effect when the tooltip disappears because of user interaction, i wonder why the flex team doesn’t recognise this as usefull

Reply

Peter deHaan February 23, 2009 at 10:15 am

Martin,

I submitted a bug for this in the public Flex bug base @ http://bugs.adobe.com/jira/browse/SDK-19469

Everybody, please vote if this issue is important to you.

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

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: