Tooltips

Tooltips are small, interactive elements that display additional information when users hover over or click on a specific icon in a graphical interface.

Overview

A tooltip appears as a small box containing additional clarifying information. Use tooltips to provide context or instructions without cluttering the web page.

To ensure consistency across all USAC products, use only the following tooltips.

Design and Layout

Interaction

Tooltip icons have two stages: pending and active.

  • In the pending state, the help icon is Blue 38 (#0052EB).

  • In the active state, the help icon is Blue 26 (#0039A3) and the tooltip is visible.

Placement

Place the Primary Tooltip (Tooltip Right) at the end of a form label or column header. It should open to the right. If Tooltip Right does not fit or distracts from reading, use one of the following positions in order of preference:

  • Tooltip Top

  • Tooltip Bottom

  • Tooltip Left

Dos and Don’ts

Tooltip EIN
Do
  • Do use tooltips when a form label is unclear and needs extra explanation.
Tooltip Password
Don't
  • Don’t use tooltips for form field requirements. Instead, use help text for important information that should always be visible, such as formatting requirements.
Tooltip Right
Don't
  • Don’t use tooltips for redundant information.

Installation

Props

Slots