Skip to main content

Tooltip

Non-actionable UI element that only contains text and does not require the user to take action but serves only to inform the user before taking action, contextualizing an action or label/icon, but when used as a Popover, the element takes on a more persistent appearance and allows the user to take action on the content inside of the popover.

Anatomy​

Legend​

  1. Content bubble
  2. Beak

Options​

Placement​

There are a total of 12 placement options that can be used for both Popover and tooltips.

Offset​

Both tooltips and popovers have optional offsets. The offset is defined by a set of 2 numbers [0,16]. The first number indicating the x offset and the 2nd indicating the y offset. Default offset is [0,8].

asPopOver​

When set as a popover, the beak will be hidden, shadow applied, and the trigger will require the user to click instead of over to reveal the content bubble.

Themes​

Three available themes for the tooltip & popover. They include light, dark and a subscription theme.

Behavior​

Overflow​

Tooltips and popover have no inherent fixed size. The content inside will span the width of its parent container unless otherwise specified.

On Hover​

Tooltips will be triggered on hover (tap for mobile) and will disappear if the user is no longer hovering over the element or the tooltip itself.

On Click​

When used as a Popover, the trigger will be on click (tap for mobile) and will only disappear if the user clicks outside of the content bubble.

Flip to fit​

The tooltip/popover will flip from its original placement if there is not enough space to remain on screen. The tooltip/popover will no longer attempt to stay in view if the user scrolls beyond the trigger element.

Usage guidelines​


Nesting popovers​

Nesting popovers may seem helpful as a trick to get content on the screen, but it is very hard for the user to navigate content this way.

Alert

Mixing patterns​

Tooltips should never nest a popover. Since the tooltip shows/hides on hover the precision required for the user to navigate the content becomes increasingly harder as patterns mix.

Close

Abusing offset​

Avoid setting the offset to close or to far from the trigger.

Close

Pair with Button Icons​

Giving user context with tooltips can be helpful way to inform of the Button Icon function.

Check
Hover to see example

Specs​

Size​

Tooltip takes up the full width of its parent container and full height of the content inside its bubble.

Component Checklist​

Check
Accessibility

Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.

Check
States are defined

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Check
Specs are defined

Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match

Check
Works with all supported color themes

Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes

Check
Options are defined

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Check
Behaviors are defined

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Check
Design component created

A equivalent design component as been created matching as best as possible to properties found in the coded component.

Check
All web screen sizes

Component can scale for all platforms mobile, tablet, and desktop.

Check
Works on Homepage sizes

Component has an opinion on how it scales on Homepage columns and other modular layouts.

Works in apps

Component can be used in iOS and Andriod or has an equivalent app component

Check
Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Check
Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

Check
Web Vitals

Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)