Skip to content
Home

Tooltip

Info
Demos
Properties

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 on mouseleave.
  • active={false}: The Tooltip stays hidden and ignores DOM events. It will not auto-show on mouseenter or focus.

To use the built-in hover/focus/touch behavior, omit the active property and let the component manage visibility internally.

Demos

Button with hover Tooltip

Code Editor
<Button tooltip="Button tooltip" text="Hover" />

Button with active Tooltip

Code Editor
<Button tooltip={<Tooltip active>Basic Tooltip</Tooltip>} text="Active" />

NumberFormat with a tooltip

Code Editor
<NumberFormat tooltip="Tooltip">1234</NumberFormat>

... or wrapped around the NumberFormat component:

Code Editor
<Tooltip targetElement={<NumberFormat>1234</NumberFormat>}>
  Tooltip NumberFormat
</Tooltip>

Tooltip with delay

Code Editor
<Tooltip
  hideDelay={1e3}
  size="large"
  targetElement={<Span right>Top</Span>}
>
  Tooltip 1
</Tooltip>
<Tooltip position="bottom" targetElement={<Span>Bottom</Span>}>
  Tooltip 2
</Tooltip>

Tooltip linked to a vanilla button

Code Editor
<button className="target-1">Show the Tooltip</button>
<Tooltip id="unique" active targetSelector=".target-1">
  Tooltip linked
</Tooltip>