Komponenter

Tooltip

Tooltip viser kort informasjon når brukeren holder musepekeren over eller fokuserer på et element. Den brukes til sekundær informasjon, for eksempel til å forklare hva et symbol betyr.

Oversikt Kode Tilgjengelighet

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

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

render(<Preview />)

Bruk

Bruk pakken @digdir/designsystemet-web for å implementere Tooltip. Du trenger kun å legge på data-tooltip-attributtet på elementet som skal trigge tooltipen. For tilgjengelighet vil elementet automatisk få aria-label eller aria-description, avhengig av om det inneholder tekstinnhold.

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

Egendefinert element

Bruk funksjonen setTooltipElement for å sette et egendefinert tooltip-element. Elementet vil automatisk bli lagt til i document.body hvis det ikke allerede er i dokumentet.

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

CSS variablar og data-attributter

Størrelser styres med data-size og farger meddata-color. Komponenten vil arve nærmeste forelder med disse satt.

CSS-variabler
Navn	Verdi
--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-attributter
Navn	Verdi
data-tooltip
data-overscroll	contain
data-floating	top, right, bottom, left

React

import { Tooltip, Button } from "@digdir/designsystemet-react";
<Tooltip content="Hjelpetekst">  <Button>Hover meg</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.

Rediger denne siden på github.com (åpnes i ny fane)