Balance Logo
Reckon Design System


Tooltips are floating labels that briefly explain the function of a user interface element.
pnpm add @reckon-web/tooltip
Import usage
import {
} 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).


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.


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

Open in Playroom


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.