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.
{ 6 comments… read them below or add one }
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)