components

Tooltip

A floating label that provides additional helpful, but non-essential information for another element on hover or focus.
GitHub
Figma

Usage guidance

Tooltips should contain non-critical information, used to provide additional information within the context. This means it should be nice-to-have and not contain any vital information, as the user might not even see them since they only appear on hover. This is largely due to some common accessibility concerns and mobile interaction difficulties with tooltips in general. As a result of this, Tooltips should be used sparingly - if you find yourself using them a lot, consider clarifying the language and experience of the design.

Additional non-interactive elements can also be used within the content of a Tooltip, such as custom styling or Icons. If interaction is desired, then a Dialog should be used instead.

A Tooltip will appear on hover or focus of the trigger, and remain visible until the focus or cursor is moved away. The placement of a Tooltip should be chosen based on the positioning of the trigger element on a page. It may be necessary to adjust the placement value at different breakpoints to accommodate any layout changes.


Best practices

General

Trigger

A Tooltip trigger can be almost any element; however when you wish to provide supporting information, or in cases where it does not make sense to have it on a specific element, you should use the Help/HelpCircle Icon as the trigger instead. A similar approach should be taken when using a Tooltip inline with text.


Examples

Basic usage

With complex content

Within inline text

Through hands-on exercises, with DataCamp you’ll learn how to understand data, whether it’s a bar plot on the news or as a statistic shared during a work meeting. You’ll expand your knowledge of key data topics, including data science, machine learning, data visualization, and even data engineering and cloud computing.


Playground

Live

Props

Tooltip

In addition to the props listed below, Tooltip accepts all props from React.HTMLAttributes<HTMLDivElement>, except: children, content.

NameTypeDescription
childrenRequired
JSX.Element

The content that will trigger the Tooltip. Must be a single element.

contentRequired
React.ReactNode

The content of the Tooltip.

inverted
boolean

Sets the style of the Tooltip suitable for dark backgrounds.

Default:

false

DEPRECATED

Will be removed in v6 - use Waffles' Theming instead.

offset
string

Sets the distance between Tooltip and it's trigger. See Design Tokens for value of default.

Default:

tokens.spacing.small

placement
bottombottomLeftbottomRightleftrighttoptopLefttopRight

Sets the Tooltip's position relative to the trigger.

Default:

bottom


Imports

You can import the following components, utilities or types from this module:

import { Tooltip } from '@datacamp/waffles/tooltip';
import type { TooltipProps } from '@datacamp/waffles/tooltip';