© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

 

FLYOUT MENU OR CUSTOM TOOLTIP

A flyout menu is a type of menu that hides automatically when the cursor leaves the menu.


The same technique used for building a flyout menu, explained below, can also be used to build a custom tooltip. (To make a simple text tooltip is even easier—just use the "Tooltip" field in the Properties tab.)

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: SETUP

Open the "Flyout menu" page in the training document. This page contains four button widgets making up a main menu, and two sub-menu buttons for one of the main menu items.


Add the two submenu items to a group by selecting them and clicking "Group" in the top toolbar.


Name the group "Flyout".


Hide the group by clicking the "Hidden" checkbox in the Style tab.

STEP 2: ADD AN INTERACTION TO SHOW THE FLYOUT MENU

Select the "Help" widget (the one with the submenu items). Double-click "OnMouseEnter" in the Properties tab to make a new OnMouseEnter case. (For a custom tooltip, you may wish to use the Event "OnMouseHover" instead. OnMouseHover events fire when the cursor stays over the widget for two seconds. To find OnMouseHover, use the "More Events" dropdown.)


In the left column, click the action "Show".


In the right column, click the group named "Flyout".


At the bottom of this column, use the "More Options" dropdown to select "treat as flyout".


Click "OK" to close the dialog.

STEP 3: PREVIEW

Click Preview.


In the prototype, the flyout menu shows when your cursor enters the "Help" button and hides when your cursor leaves the menu.

STEP 4: CUSTOM TOOLTIP

Apply what you've learned above to complete the next page in the AxureTraining.rp file, called "Custom tooltip". Show the speech bubble widget when the image widget is hovered over using the image's "OnMouseHover" event. Try adding an animation this time—150ms of fade in.


Good luck! Check the "Finished" folder for a finished example of the page if you get stuck.

MORE RESOURCES

CORE TRAINING

TUTORIALS