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

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

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE