Components

Tooltip

Tooltip displays brief information when the user hovers over or focuses on an element. It is used for secondary information, such as explaining the meaning of an icon.

Overview Code Accessibility

HTML

HTMLReact

Press Enter to start editing

Unable to parse html

const PreviewEn = () => {
  return (
    <Tooltip content='Copy' placement='top'>
      <Button icon aria-label='Copy'>
        <FilesIcon aria-hidden />
      </Button>
    </Tooltip>
  );
};

render(<PreviewEn />)

Usage

Use the @digdir/designsystemet-web package to implement Tooltip. You only need to add the data-tooltip attribute to the element that will trigger the tooltip. For accessibility, the element will automatically receive either aria-label or aria-description, depending on whether it contains text content.

<button data-placement="left" data-tooltip="left" class="ds-button">  left</button>

Custom element

Use the setTooltipElement function to set a custom tooltip element. The element will auto automatically be added do document.body if it is not already in the document.

import { setTooltipElement } from @digdir/designsystemet-web
const myTooltip = document.createElement('div');myTooltip.className = 'ds-tooltip my-custom-tooltip';setTooltipElement(myTooltip);

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the nearest parent with these set.

CSS Variables
Name	Value
--dsc-tooltip-background	var(--ds-color-neutral-text-default)
--dsc-tooltip-color	var(--ds-color-neutral-background-default)
--dsc-tooltip-border-radius	var(--ds-border-radius-default)
--dsc-tooltip-padding	var(--ds-size-1) var(--ds-size-2)
--dsc-tooltip-arrow-size	var(--ds-size-2)
--dsc-tooltip-transition-duration	0.2s
--dsc-tooltip-transition-delay	150ms
--dsc-tooltip-placement	top

Data Attributes
Name	Value
data-tooltip
data-overscroll	contain
data-floating	top, right, bottom, left

React

import { Tooltip, Button } from "@digdir/designsystemet-react";
<Tooltip content="Help text">  <Button>Hover me</Button></Tooltip>;

children
Description: The element or string that triggers the tooltip. @note If it is a string, it will be wrapped in a span. @note If it is an element, it needs to be able to receive a ref.
Type: string | (ReactElement<unknown, string | JSXElementConstructor<any>> & RefAttributes<HTMLElement>)

content
Description: Content of the tooltip
Type: string

placement
Description: Placement of the tooltip on the trigger.
Type: Placement
Default: top

autoPlacement
Description: Whether to enable auto placement.
Type: boolean
Default: true

open
Description: Whether the tooltip is open or not. This overrides the internal state of the tooltip. @deprecated This should not be used on Tooltip. Use a Popover instead @TODO Look at this prop
Type: boolean

type
Description: @deprecated This prop has no effect. The tooltip will be set as `aria-description` if the component already contains accessible text, and `aria-label` otherwise.
Type: "describedby" | "labelledby"

Name	Type	Default	Description
children	`string \| (ReactElement<unknown, string \| JSXElementConstructor<any>> & RefAttributes<HTMLElement>)`	-	The element or string that triggers the tooltip. @note If it is a string, it will be wrapped in a span. @note If it is an element, it needs to be able to receive a ref.
content	`string`	-	Content of the tooltip
placement	`Placement`	top	Placement of the tooltip on the trigger.
autoPlacement	`boolean`	true	Whether to enable auto placement.
open	`boolean`	-	Whether the tooltip is open or not. This overrides the internal state of the tooltip. @deprecated This should not be used on Tooltip. Use a Popover instead @TODO Look at this prop
type	`"describedby" \| "labelledby"`	-	@deprecated This prop has no effect. The tooltip will be set as `aria-description` if the component already contains accessible text, and `aria-label` otherwise.

Edit this page on github.com (opens in a new tab)