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
Props
Tooltip
In addition to the props listed below, Tooltip
accepts all props from React.HTMLAttributes<HTMLDivElement>
, except: children
, content
.
Name | Type | Description |
---|---|---|
children Required | JSX.Element | The content that will trigger the Tooltip. Must be a single element. |
content Required | React.ReactNode | The content of the Tooltip. |
inverted | boolean | Sets the style of the Tooltip suitable for dark backgrounds. Default:
DEPRECATED Will be removed in |
offset | string | Sets the distance between Tooltip and it's trigger. See Design Tokens for value of default. Default:
|
placement | bottom bottomLeft bottomRight left right top topLeft topRight | Sets the Tooltip's position relative to the trigger. Default:
|
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';