Tooltips - USAC | Indigo Design System v1.2.0

Overview

A tooltip appears when the cursor is positioned over an icon in a graphical interface. The user hovers over or clicks on an icon and a tooltip (a small “hover box” with additional clarifying information about the item) will appear.

These tooltip icons are designed to ensure consistency across all USAC products.

Interaction

Tooltip icons have two stages: pending and active.

Pending stage is represented by the tooltip icon colored in HEX #006FF4.

Active stage is represented by the tooltip icon colored in HEX #FF7500.

Placement

When using the Primary Tooltip (Tooltip Right), place it at the end of the form label.

Primary Tooltips should open to the right. In cases where that doesn’t fit, use the Additional Tooltip options.

Primary Tooltip

Use Tooltip Right wherever possible.

html

Copy to Clipboard

<button class="indi-tooltip ">
    <span class="indi-tooltip__content">Tooltip text goes here Tooltip text goes here Tooltip text goes here</span>
    <svg class="indi-icon" aria-labelledby="title">
        <title>help</title>
        <use xlink:href="/assets/icons/indi_icons.svg#help">
    </svg>
</button>

Additional Tooltips

When Tooltip Right does not fit, or distracts from the user’s ability to read information on the page or in the tooltip, choose one of the following in prioritized order:

1. Tooltip Top

html

Copy to Clipboard

<button class="indi-tooltip indi-tooltip--top">
    <span class="indi-tooltip__content">Tooltip text goes here Tooltip text goes here Tooltip text goes here</span>
    <svg class="indi-icon" aria-labelledby="title">
        <title>help</title>
        <use xlink:href="/assets/icons/indi_icons.svg#help">
    </svg>
</button>

2. Tooltip Bottom

html

Copy to Clipboard

<button class="indi-tooltip indi-tooltip--bottom">
    <span class="indi-tooltip__content">Tooltip text goes here Tooltip text goes here Tooltip text goes here</span>
    <svg class="indi-icon" aria-labelledby="title">
        <title>help</title>
        <use xlink:href="/assets/icons/indi_icons.svg#help">
    </svg>
</button>

3. Tooltip Left

html

Copy to Clipboard

<button class="indi-tooltip indi-tooltip--left">
    <span class="indi-tooltip__content">Tooltip text goes here Tooltip text goes here Tooltip text goes here</span>
    <svg class="indi-icon" aria-labelledby="title">
        <title>help</title>
        <use xlink:href="/assets/icons/indi_icons.svg#help">
    </svg>
</button>

Use Guidelines

Use When

A form label is not clear enough and needs extra explanation.
Adding information that enhances the question, action, or field it applies to. Not to be confused with Help Text.

Don't Use When

A form label is clear.
The clarifying information is important enough to be present on the page at all times. In that case, use Help Text.
Adding information to a Button component.

Editorial

Strive for short, succinct, and clear text. Avoid lengthy hover boxes.

Accessibility

Always use Alt text for the tooltip icon for screen readers.
For screen readers and touch devices, always allow users the option to click to open the tooltip as well as hover.