Flex Examples
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.
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.
Share
Sweet,
simple and effective. Just what i need.
That made my day! :)
When adding the FAder effect the font can’t be fade. Only the Tooltip background/ Border is transitioned.
Ali,
When using the Fade effect, did you embed your font?
Peter
The hide effect never seems to fire? The tool tip just disappears. It seems like it should zoom out based on the example code.
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
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
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
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
Is there a way to use a Bounce effect, to show the tooltip?
Nice thanks for the tip!
great work.you’re the best man.ouahh
The requiredFieldError and other error message styles do not take the color: from the tooltip style.
any idea how to get the toolTip’s
hideEffectto play when you mouse off the element instead of just disappearing?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
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