Adding animations and effects to Flex tool tips

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 thoughts on “Adding animations and effects to Flex tool tips

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

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

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

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

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

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

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

Comments are closed.