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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

15 Responses to Adding animations and effects to Flex tool tips

  1. R3dsky says:

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

  2. Ali says:

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

  3. peterd says:

    Ali,

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

    Peter

  4. Myles says:

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

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

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

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

    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

  9. Maycon says:

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

  10. Nice thanks for the tip!

  11. benjy says:

    great work.you’re the best man.ouahh

  12. arisco97 says:

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

  13. jimbo says:

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

  14. Martin says:

    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

  15. Peter deHaan says:

    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

Leave a Reply

Your email address will not be published.

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