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.

View MXML

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

 
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.

9 Responses to Controlling a Flex tool tip’s show delay, hide delay, and scrub delay

  1. levan says:

    nice example. my interest is still to find a way to programatically triger tooltip without user mouse overing on a component, is it possible?

  2. peterd says:

    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>
    
  3. Hey – Just wanted to say thanks for the helpful blog. Please keep up the great work. — doug

  4. Michael says:

    Hello, do you know how to disable a tooltip for a certain component?

  5. peterd says:

    Michael,

    It may differ depending on the component, but try setting the toolTip property to an empty string.

    Peter

  6. sydd says:

    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)

  7. David Salahi says:

    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.

    • Peter deHaan says:

      @David Salahi,

      That sounds like the correct behavior (if I understand correctly). From ye olde docs:

      The amount of time, in milliseconds, that Flex waits to hide the ToolTip after it appears. Once Flex hides a ToolTip, the user must move the mouse off the component and then back onto it to see the ToolTip again. If you set hideDelay to Infinity, Flex does not hide the ToolTip until the user triggers an event, such as moving the mouse off of the component.

      The default value is 10000.

      via http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/ToolTipManager.html#hideDelay

      Peter

      • David Salahi says:

        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.

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