@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
521 lines (457 loc) • 13.1 kB
Markdown
---
title: 'Tooltip'
description: 'The Tooltip component is primarily meant to enhance the UX for various and additional information.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.037Z
checksum: d7368284604259dbc1ca9c882698149730cdd6ce65244dfba59efc96890b5fa3
---
# Tooltip
## Import
```tsx
import { Tooltip } from '@dnb/eufemia'
```
## Description
The Tooltip component is primarily meant to enhance the UX for various and additional information.
## Relevant links
- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=44531-1111)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/tooltip)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip)
### 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](/uilib/components/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](/uilib/components/anchor) and [Button](/uilib/components/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
```tsx
render(<Button tooltip="Button tooltip" text="Hover" />)
```
### Button with active Tooltip
<VisibleWhenNotVisualTest>
```tsx
render(
<Button
tooltip={<Tooltip active>Basic Tooltip</Tooltip>}
text="Active"
/>
)
```
</VisibleWhenNotVisualTest>
### NumberFormat with a tooltip
```tsx
render(<NumberFormat tooltip="Tooltip">1234</NumberFormat>)
```
... or wrapped around the [NumberFormat](/uilib/components/number-format) component:
```tsx
render(
<Tooltip targetElement={<NumberFormat>1234</NumberFormat>}>
Tooltip NumberFormat
</Tooltip>
)
```
### Tooltip with delay
```tsx
<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
<VisibleWhenNotVisualTest>
```tsx
<button className="target-1">Show the Tooltip</button>
<Tooltip id="unique" active targetSelector=".target-1">
Tooltip linked
</Tooltip>
```
</VisibleWhenNotVisualTest>
```tsx
render(<Button tooltip={`${longText} ${longText}`} text="Long text" />)
```
```tsx
<Button className="target-align-center">
Align center & arrow center
</Button>
<Tooltip
id="unique-align-center"
targetSelector=".target-align-center"
align="center"
arrow="center"
>
Align center & arrow center
</Tooltip>
```
```tsx
<Button className="target-align-center-long-text">
Align center & arrow center
</Button>
<Tooltip
id="unique-align-center-long-text"
targetSelector=".target-align-center-long-text"
align="center"
arrow="center"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-position-right">Position right</Button>
<Tooltip
id="unique-position-right"
targetSelector=".target-position-right"
position="right"
>
Position right
</Tooltip>
```
```tsx
<Button className="target-position-right-long-text">
Position right
</Button>
<Tooltip
id="unique-position-right-long-text"
targetSelector=".target-position-right-long-text"
position="right"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-align-left">Align left</Button>
<Tooltip
id="unique-align-left"
targetSelector=".target-align-left"
align="left"
>
Align left
</Tooltip>
```
```tsx
<Button className="target-align-left-long-text">Align left</Button>
<Tooltip
id="unique-align-left-long-text"
targetSelector=".target-align-left-long-text"
align="left"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-align-right">Align right</Button>
<Tooltip
id="unique-align-right"
targetSelector=".target-align-right"
align="right"
>
Align right
</Tooltip>
```
```tsx
<Button className="target-align-right-long-text">Align right</Button>
<Tooltip
id="unique-align-right-long-text"
targetSelector=".target-align-right-long-text"
align="right"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-align-arrow-left">
Align left & arrow left
</Button>
<Tooltip
id="unique-align-arrow-left"
targetSelector=".target-align-arrow-left"
align="left"
arrow="left"
>
Align left & arrow left
</Tooltip>
```
```tsx
<Button className="target-align-arrow-left-long-text">
Align left & arrow left
</Button>
<Tooltip
id="unique-align-arrow-left-long-text"
targetSelector=".target-align-arrow-left-long-text"
align="left"
arrow="left"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-align-arrow-right">
Align right & arrow right
</Button>
<Tooltip
id="unique-align-arrow-right"
targetSelector=".target-align-arrow-right"
align="right"
arrow="right"
>
Align right & arrow right
</Tooltip>
```
```tsx
<Button className="target-align-arrow-right-long-text">
Align right & arrow right
</Button>
<Tooltip
id="unique-align-arrow-right-long-text"
targetSelector=".target-align-arrow-right-long-text"
align="right"
arrow="right"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-align-left-arrow-right">
Align left & arrow right
</Button>
<Tooltip
id="unique-align-left-arrow-right"
targetSelector=".target-align-left-arrow-right"
align="left"
arrow="right"
>
Align left & arrow right
</Tooltip>
```
```tsx
<Button className="target-align-left-arrow-right-long-text">
Align left & arrow right
</Button>
<Tooltip
id="unique-align-left-arrow-right-long-text"
targetSelector=".target-align-left-arrow-right-long-text"
align="left"
arrow="right"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-align-right-arrow-left">
Align right & arrow left
</Button>
<Tooltip
id="unique-align-right-arrow-left"
targetSelector=".target-align-right-arrow-left"
align="right"
arrow="left"
>
Align right & arrow left
</Tooltip>
```
```tsx
<Button className="target-align-right-arrow-left-long-text">
Align right & arrow left
</Button>
<Tooltip
id="unique-align-right-arrow-left-long-text"
targetSelector=".target-align-right-arrow-left-long-text"
align="right"
arrow="left"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-arrow-left">Arrow left</Button>
<Tooltip
id="unique-arrow-left"
targetSelector=".target-arrow-left"
arrow="left"
>
Arrow left
</Tooltip>
```
```tsx
<Button className="target-arrow-left-long-text">Arrow left</Button>
<Tooltip
id="unique-arrow-left-long-text"
targetSelector=".target-arrow-left-long-text"
arrow="left"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-arrow-right">Arrow right</Button>
<Tooltip
id="unique-arrow-right"
targetSelector=".target-arrow-right"
arrow="right"
>
Arrow right
</Tooltip>
```
```tsx
<Button className="target-arrow-right-long-text">Arrow right</Button>
<Tooltip
id="unique-arrow-right-long-text"
targetSelector=".target-arrow-right-long-text"
arrow="right"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-position-left">Position left</Button>
<Tooltip
id="unique-position-left"
targetSelector=".target-position-left"
position="left"
>
Position left
</Tooltip>
```
```tsx
<Button className="target-position-left-long-text">Position left</Button>
<Tooltip
id="unique-position-left-long-text"
targetSelector=".target-position-left-long-text"
position="left"
>
{longText}
</Tooltip>
```
```tsx
<Button className="target-position-bottom">Position bottom</Button>
<Tooltip
id="unique-position-bottom"
targetSelector=".target-position-bottom"
position="bottom"
>
Position bottom
</Tooltip>
```
```tsx
<Button className="target-position-bottom-long-text">
Position bottom
</Button>
<Tooltip
id="unique-position-bottom-long-text"
targetSelector=".target-position-bottom-long-text"
position="bottom"
>
{longText}
</Tooltip>
```
## Properties
```json
{
"props": {
"children": {
"doc": "Provide a string or a React Element to be shown as the tooltip content.",
"type": "React.Node",
"status": "optional"
},
"active": {
"doc": "Controls visibility. When provided, Tooltip is controlled and ignores DOM events (hover/focus/touch). `true` keeps it visible; `false` keeps it hidden.",
"type": "boolean",
"status": "optional"
},
"position": {
"doc": "Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.",
"type": ["top", "right", "left", "bottom"],
"status": "optional"
},
"align": {
"doc": "Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`. Defaults to `center`.",
"type": ["center", "right", "left"],
"status": "optional"
},
"arrow": {
"doc": "Defines the direction where the arrow appears. Can be `center`, `top`, `right`, `bottom` and `left`. Defaults to `center`.",
"type": ["center", "top", "right", "bottom", "left"],
"status": "optional"
},
"portalRootClass": {
"doc": "CSS class name applied to the portal root element. Used to style or identify the portal container.",
"type": "string",
"status": "optional"
},
"skipPortal": {
"doc": "Skip rendering the tooltip in a React Portal. When `true`, the tooltip renders inline in the DOM tree instead of being portaled to document.body. Useful for cases where you need the tooltip to be part of the same DOM hierarchy for styling or event handling. Defaults to `false`.",
"type": "boolean",
"status": "optional"
},
"keepInDOM": {
"doc": "Keep the tooltip portal mounted in the DOM even when closed. When `true`, the tooltip remains in the DOM when inactive. Defaults to `false`.",
"type": "boolean",
"status": "optional"
},
"omitDescribedBy": {
"doc": "Set to `true` to omit the `aria-describedby` attribute on the target element. Defaults to `false`.",
"type": "boolean",
"status": "optional"
},
"showDelay": {
"doc": "Define the delay until the tooltip should show up after the initial hover / active state.",
"type": "boolean",
"status": "optional"
},
"hideDelay": {
"doc": "Define the delay until the tooltip should disappear up after initial visibility.",
"type": "boolean",
"status": "optional"
},
"size": {
"doc": "Defines the spacing size of the tooltip. Can be `large` or `basis`. Defaults to `basis`.",
"type": ["large", "basis"],
"status": "optional"
},
"targetElement": {
"doc": "Provide an element directly as a React Node or a React Ref that will be wrapped and rendered.",
"type": ["React.Node", "React.RefObject"],
"status": "optional"
},
"targetSelector": {
"doc": "Specify a vanilla HTML selector by a string as the target element.",
"type": "string",
"status": "optional"
},
"triggerOffset": {
"doc": "Adjust the pixel gap between the tooltip content and its trigger. Use positive values to place the tooltip further away (e.g., to match custom spacing). Defaults to `16`.",
"type": "number",
"status": "optional"
},
"noAnimation": {
"doc": "Set to `true` if no fade-in animation should be used.",
"type": "boolean",
"status": "optional"
},
"fixedPosition": {
"doc": "If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.",
"type": "boolean",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```