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