Mobile Tooltip Guide

Overview

Note: Requires SDK Version 2.3.3 and higher.

A mobile tooltip is a guide that appears next to a specific element in your app.

Tooltip guides are used to highlight a specific feature upon a new feature launch. or to increase discoverability. Tooltips can also be part of guided walkthroughs or onboarding flows, see this article on how to build a Multi-step guide. 

 Frame_6__1_.png

Permissions

To use the Visual Design Studio, Pendo users will need one of the two following permissions:

  • Pendo Administrator Permissions
  • Pendo User Permissions with at least one of the following:
    • Create Guides from Layouts
    • Manage Published Guides

How to Create Your Guide

  1. Create a new guide
  2. Select a tooltip layout: Use any of the pre-built layouts Pendo offers or create your own You are redirected to the ‘Guide Details Page’, showing your new tooltip guide.

image_2.gif

Tooltip Location

You can change the element and the default position of the tooltip under the Location tab in the Edit container. If the selected element does not leave enough space on the screen for the tooltip, Pendo will automatically re-positions it.


image_4.gif

Visual Backdrop 

By default, the target element will be exposed above the backdrop to allow the user to click on it. The tooltip will close/advance once the user clicks on the target element. To customize settings for the visual backdrop go to the Styling in the container:

Remove the backdrop - Users will be able to click through the app and once they do, the tooltip will close / the tour will advance.

Show Target Element Above Backdrop -  Elements and other areas on the screen beneath the backdrop will not be clickable. This can be used when you want to highlight a specific feature or when providing a guided walkthrough where the user needs to proceed with the tour. This option should be used along with tooltip buttons.

image_10.gif

image_6.png

 

  

Note: When creating the tooltip, you will not see it positioned correctly on the Visual Design Studio. In order to see its actual positioning in the context of the app, test the tooltip on your device. 

 

Frequently Asked Questions

How do I create a small guidance tooltip?

To highlight a specific feature of yours via a tooltip, consider whether you want this tooltip to block the app. For a non-blocking tooltip which disappears once the user clicks on the screen

  • Select a layout without buttons, such as 'Tooltip small Helper'
  • Select a page and an element for your tooltip's location
  • In the 'Styling' tab, remove the visual backdrop This means that your tooltip will close once the user clicks on the screen.

What's the recommended way to create a tooltip with buttons?

Sometimes you want the tooltip to highlight a feature, but you want the user to stay on the same page for the next step. In this case, add a tooltip with an 'OK'/'Got it' button, and not allow the user to click on the feature.

  • Select a layout with buttons or add buttons to an existing tooltip.
  • In the 'Styling' tab, uncheck the 'Expose target element above backdrop'
  • This allows for the tour to advance/dismiss only by clicking on the tooltips' buttons.

image_9.png
Build a tour that spans across several app pages

A tour that guides the user through a specific flow in your app sometimes requires the user to click on the target element to advance the flow. Here is our recommended way of implementing this:

  • Select a layout without buttons, such as 'Tooltip small Helper'
  • Select a page and an element for your tooltip's location
  • Leave the default settings to include backdrop, and expose target element above the backdrop