Tooltip

The Tooltip displays extra information when hovered or tapped on.

Overview

The Tooltip is a small component that can display text information to the user, hidden under a tap or a hover.

Tooltip TitleTooltip Message...The Tooltip Component.

Usage

The tooltip should be used wherever including extra detail would be beneficial to the user. The Tooltip is hidden under an Information Icon and will only display itself when hovered or tapped (mobile) on.

Anatomy

Tooltip TitleTooltip Message...TriggerTooltip Item12Tooltip Title3Tooltip Message4The Tooltip Anatomy.

The Tooltip component has two main sections - the main navigational area at the top of the bar, and the fixed area at the bottom of the bar.

  1. Trigger. This is the element that is interacted with to display the Tooltip. In this instance, the trigger is placed on an Information Icon.
  2. Tooltip Item. The Tooltip Item floats above the Information Icon
  3. Tooltip Title (Optional). Add a Title to accompany the main Tooltip Body.
  4. Tooltip Message. The Tooltip Message contains the main content of the tooltip. This section is required, unlike the title.

Sizing & Spacing

The Tooltip is only available in 1 size.

States

The Tooltip States.DefaultHovered/PressedTooltip TitleTooltip Message...

The Tooltip has two states - Default and Hovered/Tapped (mobile). By default, the Tooltip Item is hidden. Hovering on the Information Icon will fade the Tooltip in to show the text info.

Hierarchy & Placement

There is no hard limit to the number of Tooltips that can be added to a page, however, try to use them sparingly.

Variations

Tooltip Message...Tooltip TitleTooltip Message...The Tooltip Variations.The Tooltip comes in two variations - with and without the Tooltip Title. You can also set the direction of the tooltip to be either the Top, Right, Left, or Bottom.

When a developer wants to show a tooltip they must calculate the position for it to be displayed at and render a Tooltip element with the position information and a message, plus an optional title.

Basic Usage

<Tooltip
  top={50}
  left={50}
  position="top"
>
  Tooltip message
</Tooltip>
  
<Tooltip
  top={50}
  left={250}
  width={180}
  position="right"
  title="Tooltip title"
>
  Tooltip message...
</Tooltip>

Tooltip Properties

NameTypeRequiredDefaultDescription
bottomnumberFalsen/aThe bottom style property in pixels
childrenReactNodeTruen/aThe message to display in the Tooltip
idstringFalsen/aAn optional id attribute value assigned to the component to be used in conjunction with `aria-describedby`
positionabove|below|left|rightTrueaboveThe position the Tooltip displays relative to the element it is associated with
rightnumberFalsen/aThe right style property in pixels
topnumberFalsen/aThe top style property in pixels
widthnumberFalsen/aThe width style property in pixels