Import
import { Tooltip } from '@dnb/eufemia'
Description
The Tooltip component is primarily meant to enhance the UX for various and additional information.
Relevant links
Tooltip accessibility problems
Because tooltips are often triggered by hover actions, developers and UX designers need to find alternative ways to support access to that information.
The Tooltip component is integrated into components like Button, which allows us to make tooltip information accessible to screen readers.
- All content inside the Tooltip can be selected when it is open
- When the mouse moves over the Tooltip content, the Tooltip remains open
- Custom triggers receive the necessary ARIA attributes (
aria-describedby) so assistive technologies can announce the tooltip content without hovering
Touch devices and keyboard support
To enhance accessibility for touch devices, we add tabindex="0" and a touchstart event handler.
Links (anchor) with target blank
The Eufemia Anchor and Button components display a Tooltip when the URL target is set to _blank to improve accessibility by informing users that a new window will open (out of context).
Controlled active
When you pass the active property, the Tooltip becomes controlled:
active={true}: The Tooltip stays visible and ignores DOM events (hover, focus, touch). It will not auto-hide onmouseleave.active={false}: The Tooltip stays hidden and ignores DOM events. It will not auto-show onmouseenteror focus.
To use the built-in hover/focus/touch behavior, omit the active property and let the component manage visibility internally.