Native Tooltips

Overview

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.

Use cases

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.
Click on "Start Here" then select "Create a Spotlight"
You can name the Spotlight and choose your preferred theme then select "Create".
After choosing your preferred theme, you can select whether to show the Native Tooltip from a badge or 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.

Settings options

The following sections appear under the Settings tab:

Element

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

Placement

In this section, you can edit the direction and placement of the Native Tooltip accurately.

Behavior

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".

Show 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'.

Embedding

We have added two options in the display section for anchoring the step to the desired element:

Overlay

We've adopted the Overlayed embedding. In this selection, Spotlights are positioned directly above the app which calculates the correct position periodically to ensure the correct position is maintained as the user scrolls the page or hides or expands different elements on the page.

The primary goal of this approach is that the position is fixed. However, it has the drawback of not being embedded, which causes positioning issues on different screens and causes the behavior to be faulty in some cases - for example, dragging and dropping an element with a Native Tooltip or hotspot attached to it. Therefore, we have added the inline option for such cases.

Inline

Inline Embedding is another option. Inline spotlights will be inserted into the app's HTML before or after the selected element. More specifically, the spotlight will be positioned according to the layout set by the page, not as strictly as the overlayed approach.

In this option, the Spotlight will scroll smoothly across the page without periodic repositioning, making it feel more native to the app. Another advantage is that it will be responsive on a variety of devices. Because the Spotlight positioning is bound to the app layout, the user will have no control over it.

Allow Content Overlap

When disabled, it expands the target element to make space for the Spotlight. For example, if anchored to a button, it will increase the size of the button.

When enabled, it lays the Spotlight on top of the element without expanding it

Frequency

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.

Design options

The following sections appear under the Design tab:

Badge

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 the width of the tooltip, and border settings.