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.
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
Create your guide
- Create a new guide.
- 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.
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 automatically repositions it.
Visual Backdrop
By default, the target element is exposed above the backdrop to allow the user to click on it. The tooltip closes/advances 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 can click through the app and once they do, the tooltip closes / the tour advances.
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.
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 that 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 do 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.
Build a tour that spans 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 the target element above the backdrop