This lesson will cover the following topics:

01 Getting Started

This tutorial covers styling user tips, including:
  • An overview of user tips.
  • User tip components and how to style them.
  • Changing the user tip position.

02 User Tip Overview

User tips also known as tooltips, are text labels that are displayed when the user hovers over a web element. These can be used to provide additional context to users.

03 User Tip Components

You can insert a user tip text using the element settings content tab.
Content tab for element settings menu with tooltip highlighted
The tooltip style is controlled in the project styling menu. To access this menu:
1. Expand the pages dropdown and select the style option.
2. Click Configure from the submenu. The project styling window opens.
Expanded project dropdown, style elected and configure selected from the sub menu
3. Search for User Tip in the search field. The corresponding styling options will be displayed in the right-hand menu.

The root category refers to the content window of the user tip itself. The Arrow contains the styling for the arrowhead.
customize styles > user tips style options available

04 Changing the User Tip Position

1. Navigate to the Project Settings window and select Site Elements.
2. Click the Tooltip Position gear icon.
accessing the tool tip position settings in site elements under project settings
3. Use the dropdown to determine how the tooltip is displayed.
choosing the tooltip position from the provided dropdown

05 Got Feedback?

Additional Resources