Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to set up tooltips in your interactive wireframes

Set up tooltips on your interactive wireframe components, and customize them to suit your preferences.

You can download the example below here.

Set up custom tooltips in your web and mobile wireframes

In order to set up a tooltip on a component on the canvas, select the component, go to the Properties tab and fill the ‘Tooltip’ property with the content you want displayed in the tooltip.

Custom tooltips for your web and mobile wireframes

You can also create your own custom tooltips. To do so, follow the instructions below:

1) Create a new prototype. Draw a tooltip, grouping together a Rectangle and a Text widget.

2) Select the group and mark it as hidden in the Properties tab (‘Hide component’), so it won’t be displayed when you simulate.

Set up custom tooltips in your web and mobile wireframes

3) Drag any other element on the canvas, to which you want to add a tooltip (in this case, an image).

4) Select the image and, in the Events tab, click the ‘Add event‘ button.

4) Add an “On Mouse Over” + “Show” event, select the group and click OK.

5) Click on Simulate and see how your customized tooltip is displayed each time the cursor moves over the image.

 

Next tutorial > Tab between input fields in your web wireframes

2 Comments

  1. bakhtawar

    September 15, 2015 at 8:40 pm

    how to add hover color effect on image?

    • Danielle Schneider

      September 15, 2015 at 10:02 pm

      Create an on-mouse-over event and have the result be ‘Change style’. Note that you won’t be able to actually change the image, but rather just the border, transparency, shadow, and rotation.