Balance Logo
Balance
Reckon Design System

Tooltip

Tooltips are floating labels that briefly explain the function of a user interface element.
Install
pnpm add @reckon-web/tooltip
Import usage
import {
Tooltip
} from '@reckon-web/tooltip';
  • Code
  • API

Tooltips are meant to be used for supplemental content and should never be used for critical information the user needs to complete a task. Tooltips may not contain interactive elements (such as buttons or links).

Usage

Tooltips should:

  • Provide useful, additional information or clarification.
  • Succinctly describe or expand on the element they point to.
  • Be provided for icon-only buttons or a button with an associated keyboard shortcut.
  • Be used sparingly. Prefer clarifying the design and the language in the experience.

Basic

Tooltips are displayed to the user on hover or focus of the target element.

Open in Playroom

Placement

The placement of the tooltip relative to the target. Available tooltip placement:

  • top (default)
  • right
  • bottom
  • left

Multiline Content

Tooltip text will wrap onto multiple lines when a lot of content is provided.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.