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