Flex Examples
The following example shows how you can control how long Flex will wait to display a tool tip after the user moves the mouse over a control, how long the tool tip will be visible before disappearing and how long a user can take when moving the mouse between controls before Flex waits to display a ToolTip.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/03/controlling-a-flex-tool-tips-show-delay-hide-delay-and-scrub-delay/ -->
<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 {
showDelayMS = ToolTipManager.showDelay;
hideDelayMS = ToolTipManager.hideDelay;
scrubDelayMS = ToolTipManager.scrubDelay;
}
]]>
</mx:Script>
<mx:Number id="showDelayMS" />
<mx:Number id="hideDelayMS" />
<mx:Number id="scrubDelayMS" />
<mx:ApplicationControlBar dock="true">
<mx:Label text="showDelay:" />
<mx:NumericStepper id="showDelayNS"
minimum="0"
maximum="2000"
value="{showDelayMS}"
stepSize="100"
change="ToolTipManager.showDelay = showDelayNS.value" />
<mx:Spacer width="50%" />
<mx:Label text="hideDelay:" />
<mx:NumericStepper id="hideDelayNS"
minimum="0"
maximum="15000"
value="{hideDelayMS}"
stepSize="100"
change="ToolTipManager.hideDelay = hideDelayNS.value" />
<mx:Spacer width="50%" />
<mx:Label text="scrubDelay:" />
<mx:NumericStepper id="scrubDelayNS"
minimum="0"
maximum="15000"
value="{scrubDelayMS}"
stepSize="100"
change="ToolTipManager.scrubDelay = scrubDelayNS.value" />
</mx:ApplicationControlBar>
<mx:Tile>
<mx:Button label="Button 1" toolTip="Tool tip 1" />
<mx:Button label="Button 2" toolTip="Tool tip 2" />
<mx:Button label="Button 3" toolTip="Tool tip 3" />
<mx:Button label="Button 4" toolTip="Tool tip 4" />
<mx:Button label="Button 5" toolTip="Tool tip 5" />
<mx:Button label="Button 6" toolTip="Tool tip 6" />
<mx:Button label="Button 7" toolTip="Tool tip 7" />
</mx:Tile>
</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
nice example. my interest is still to find a way to programatically triger tooltip without user mouse overing on a component, is it possible?
levan,
Yeah, you can use the ToolTipManager class. I think I may even have an example of that somewhere already. Check out the “Creating tool tips manually using the ToolTipManager class” entry and let me know if that was what you were looking for.
Peter
Update: Here’s a slightly simpler example. To remove the tooltip (note that you can have multiple tool tips visible at the same time using the ToolTipManager class), simply call the
ToolTipManager.destroyToolTip()method and pass in the tool tip instance to delete.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.controls.ToolTip; import mx.managers.ToolTipManager; private var tt:ToolTip; private function create_toolTip():void { var str:String = "Tooltip text goes here..."; // We only want one tooltip. if (tt == null) { tt = ToolTipManager.createToolTip(str, 100, 50) as ToolTip; } } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Button label="create tool tip" click="create_toolTip();" /> </mx:ApplicationControlBar> </mx:Application>Hey – Just wanted to say thanks for the helpful blog. Please keep up the great work. — doug
Hello, do you know how to disable a tooltip for a certain component?
Michael,
It may differ depending on the component, but try setting the
toolTipproperty to an empty string.Peter
Hi
great blog!
i have a question too:
How can you dispatch the show tooltip event if im using a custom tooltip?
eg im using these 2 events to contol my tooltip:
this.addEventListener(ToolTipEvent.TOOL_TIP_CREATE,createCustomTip)
this.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,positionTip)
they get fired automatically if i hover the mouse over my sprite, but i want to
show the tooltip in other cases too (like if the sprite coordinates have a specified value)
This doesn’t seem to be working for hideDelay and scrubDelay. When I move my mouse off the buttons in the example above the tooltips disappear immediately regardless of what values are set for those two parameters. showDelay is working as expected though.
@David Salahi,
That sounds like the correct behavior (if I understand correctly). From ye olde docs:
via http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/ToolTipManager.html#hideDelay
Peter
OK, thanks, I misunderstood what hideDelay is supposed to do. I was looking for a way to make the tooltip linger after the user moves the mouse off the associated control. I see now that what hideDelay does is hides the tooltip if the mouse remains on the control for longer than the specified delay.
I’ll have to continue searching for a way to delay the disappearance of the tooltip when the user moves the mouse off the control. My use case has a clickable link in the tooltip. However, if the user moves the mouse off the control the tooltip goes away before the user can click it.