What are Tooltips?

Tooltips allow you to explain and highlight elements of the underlying application. 

Using Tooltips, Managers can provide process-related information to users to help them complete certain processes or show them new features by grabbing their attention with the help of a pulsating icon.

Who can create a Tooltip?

There is a single Tooltip edit mode to create, save, edit, and publish all in one view in the Editor.

Admins and Moderators can create, save, edit, and publish Tooltips in the Editor. Contributors can do almost everything, except that they cannot publish tooltips or edit or delete already live tooltips.

Record a Tooltip

To record a new Tooltip:

  1. Select Tooltip from the Create dropdown in the Editor. If you are already on the Tooltip tab, you can click Create.
    The Editor is minimized in the bottom left of your screen.
  2. Select the target element for the Tooltip, e.g., a button, input field, or menu. A description input box displays.
  3. Type a helpful description of the element.
  4. Define the settings. You can add choose the Tooltip type, can reselect an element if needed, set a segment, and choose the publishing language. Tooltips' segmentation and language publishing options are available directly in the Editor.  

       Check out this article for more information on language management in Userlane.

    5. Save the Tooltip


Tooltip Type

Depending on your use case, you can choose either Hint or Beacon as Tooltip type.

  • Hints are used to display the content on hover. They can provide additional information to help users finalize a process or explain unknown words, features, or specific error messages. 
  • Beacons are animated icons that display the content on click and disappear after the interaction. They are used to draw the user's attention to a new feature or change in the underlying application, or they could be used as a call to action (e.g., to ask end users to report a bug in case an alert pops up).

ℹ️ The state of a beacon is stored in the web browser's local storage. If a user clicks on a beacon, that beacon will not be shown to him as long as the same web browser is used.

Set icon (only for Hint)

  • You can choose whether the hint becomes visible only after the user hovers over the selected element or whether there is a help icon (i) next to the element that the user can hover over to make the hint text visible. You can set this up in Editor under the Icon tab:

Set icon positioning

If you decide to use the help icon, you can position it in 2 modes: 

  • automatic (default): the icon's position is automatically determined by Userlane.

  • manual: manually select the icon position from eight positions, including four internal ones (inside the element).

Icon color setting

  • You can set the color of the hint and beacon icons to match your corporate identity or the individual app palette.

  • The color setting of your icons can be adjusted in Customise > Design screen in the Portal.

Tooltip Segment

Page Segmentation and User Segmentation

Global Export/Import Text feature
  • Tooltips are included in their own sheet within the Global Export file (Portal > Customize > Languages).

  • Tooltip translation can be imported via the Export/Import Text feature.

Language Management 

Sign into Portal > Customize > Languages 

  • you can see if there are any Tooltips related to a language.
  • Tooltips are part of the content that can be published or unpublished via one action under this tab.

  • Tooltip content is removed if the corresponding language is deleted.

Element Status

A tooltip will show a notification with an orange dot in case the element is not visible on this page:

Notification for missing tooltip element

User Icon

Thank you! Your comment has been submitted for approval.