Adding animations and effects to Flex tool tips at Flex Examples

Sep

Adding animations and effects to Flex tool tips

By peterd

Categories: ToolTipManager Tags: hideDelay, hideEffect, showEffect, toolTip, ToolTipManager.

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

Full code after the jump.

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

12 Responses to “Adding animations and effects to Flex tool tips”

Feed for this Entry View blog reactions

1 R3dsky Sep 5th, 2007 at 6:27 am

Sweet,
simple and effective. Just what i need.
That made my day! :)
2 Ali Sep 5th, 2007 at 6:51 am

When adding the FAder effect the font can’t be fade. Only the Tooltip background/ Border is transitioned.
3 peterd Sep 5th, 2007 at 8:35 am

Ali,

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

Peter
4 Myles Sep 6th, 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.
5 peterd Sep 6th, 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
6 Menon Sep 27th, 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
7 Menon Sep 27th, 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
8 peterd Sep 27th, 2007 at 11:42 am

Menon,

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

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

Peter
9 Maycon Feb 4th, 2008 at 5:29 am

Is there a way to use a Bounce effect, to show the tooltip?
10 Nicole Rutter Mar 12th, 2008 at 10:58 am

Nice thanks for the tip!
11 benjy Apr 23rd, 2008 at 6:07 am

great work.you’re the best man.ouahh
12 arisco97 Jun 23rd, 2008 at 11:22 am

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