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 a Tooltip is often bound to a hover action, there are cases where you as a developer, together with a UX designer, need to find alternative ways of supporting access to that information.
The Tooltip component is integrated e.g. in the Button component. This way, we can handle the tooltip information to be accessible for screen readers.
Touch devices and keyboard support
In order to enhance accessibility for these targets, we add a tabindex="0" as well as a touchstart event handler.
Links (anchor) with target blank
The Eufemia Anchor and Button components do show the Tooltip component when the url target is set to _blank in order to enhance accessibility about the action of opening a new window (out of context).
Controlled active
When you pass the active prop, 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 prop and let the component manage visibility internally.