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

by Peter deHaan on September 3, 2007

in ToolTip

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.

{ 6 comments… read them below or add one }

1 levan September 20, 2007 at 7:16 am

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

Reply

2 peterd September 20, 2007 at 7:29 am

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>

Reply

3 Doug Marttila January 7, 2008 at 2:30 pm

Hey – Just wanted to say thanks for the helpful blog. Please keep up the great work. — doug

Reply

4 Michael November 28, 2008 at 2:24 pm

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

Reply

5 peterd November 29, 2008 at 1:36 pm

Michael,

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

Peter

Reply

6 sydd December 2, 2008 at 7:44 am

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)

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: