What are Native Tooltips?
Native Tooltips are in-app messages that appear when the user hovers over or clicks on an element. This is a great way to increase engagement and provide supplemental explanations by adding on-demand contextual help to your end-users, without requiring any additional coding or engineering resources.
Why use Native Tooltips?
In-app messaging can be sometimes annoying since it sometimes pops up when users are not ready and asking them to take actions they are not interested in. Aside from flows, you can now easily add a less-disruptive form of explanation by creating single-step native tooltips that appear when the user hovers over or clicks on a certain element in your web.
- Explain and highlight your core product features by adding brief helping text about its function
- Increase engagement by providing more understanding on how to navigate in your app
- Adding contextual help to increase retention and reduce the number of users leaving your app
- Interact with your users in a subtle way without forcing them to go into an experience
- React to user exit intent and user frustration
Creating Native tooltips
Adding a Native Tooltip to your application is a simple process, follow these steps and you'll have it created in minutes!
- Fire the Userpilot chrome extension and navigate to the page where you would like to create the Native Tooltip on.
- Click on "Start here" then select "Create Spotlight"
3. You can name the Spotlight and choose your preferred theme then select "Create".
4. After choosing your preferred theme, you can select whether to show the Native Tooltip from an badge or from a selected element in your web app.
Note: You can also select a saved template.
5. You will notice that a highlighted rectangle follows the cursor around the screen. Choose where you would like to have your Native Tooltip appear in your application
6. Using the settings & design side panel, you can fine-tune and adjust the placement, specify the selected element, and change the preferences as you like. These options are listed in detail below.
Native Tooltip Settings & Design panel
Once you have created your Native Tooltip, a settings panel will appear on the side of your screen that will allow you to easily customize options such as the placement, behavior, frequency, and design of the Native Tooltip.
Pro tip: Pre-define the look and feel of the Native Tooltips in the Theme settings of your Userpilot account.
The following sections appear under the Settings tab:
The element section includes the details of the selected element, the element you place the Native tooltip on will automatically be detected by Userpilot, however, you can manually detect an element as well by enabling the 'Text include' option or specifying a unique CSS selector to avoid any element detection failures
In this section, you can edit the direction and placement of the Native Tooltip accurately.
You can control whether you would like the Native Tooltip to trigger when the user hovers or clicks on the selected element by selecting the drop down next to the option "Trigger on".
The Native Tooltip can trigger when interacting with a badge or when interacting with an element in your web app, to edit this setting you can click on the drop down that appears next to the option 'Show on'.
We have added two options in the display section for anchoring the step to the desired element:
Once you've created and edited your Native Tooltip, you can select the frequency of the Native Tooltip in the 'Frequency' tab.You will find two options:
- Once - This will trigger the Native Tooltip one time only and it will be dismissed once the user interacts with it.
- Every time - The Native Tooltip will always appear in your web app.
The following sections appear under the Design tab:
This option will only be enabled if the Native Tooltip is set to trigger from a badge. The badge can either be a simple icon or a label that contains customized text and design. which you can edit from the side panel.
This section is related to the box settings of the Native Tooltip, such as enabling the caret, the width of the tooltip, and border settings.
Ready to publish your Native Tooltip? Head over here!