Tooltip — Kilden

Kildekode på GitHub · Les som Markdown

Tooltip viser en liten informasjonsboble når brukeren holder musepekeren over eller fokuserer på et element. Bygget på Radix UI Tooltip med automatisk posisjonering og animasjon.

Importering

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@kilden/designsystem";

Merk: TooltipProvider må wrappe alle tooltips i applikasjonen. Legg den typisk rundt rot-komponenten.

Grunnleggende bruk

<TooltipProvider>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hold over meg</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Nyttig tilleggsinformasjon</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

Posisjonering

Tooltip kan plasseres på ulike sider med side-prop-en.

<TooltipProvider>
<div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", justifyContent: "center" }}>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Over</Button>
    </TooltipTrigger>
    <TooltipContent side="top">Tooltip over</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Under</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom">Tooltip under</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Venstre</Button>
    </TooltipTrigger>
    <TooltipContent side="left">Tooltip til venstre</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Høyre</Button>
    </TooltipTrigger>
    <TooltipContent side="right">Tooltip til høyre</TooltipContent>
  </Tooltip>
</div>
</TooltipProvider>

Med forsinkelse

TooltipProvider styrer forsinkelse for alle tooltips. delayDuration angir millisekunder før tooltip vises.

<TooltipProvider delayDuration={800}>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Lang forsinkelse (800ms)</Button>
  </TooltipTrigger>
  <TooltipContent>
    Denne tok litt tid å vise!
  </TooltipContent>
</Tooltip>
</TooltipProvider>

Bruksanbefalinger

Bruk for tilleggsinformasjon

Tooltip egner seg for å forklare ikoner, forkorte tekst, eller gi kontekst som ikke er kritisk.

Ikke legg viktig innhold i tooltip

Informasjon som er nødvendig for å bruke grensesnittet bør alltid være synlig. Tooltip er utilgjengelig for touch-brukere og skjermlesere i noen kontekster.

Kopier til utklippstavle

Kort og konsis tekst

Hold tooltip-teksten kort — helst én linje. For lengre forklaringer, bruk en popover eller inline-tekst.

Klikk her for mer info →

Ikke bruk interaktivt innhold

Tooltip lukkes når brukeren flytter musen. Ikke legg lenker, knapper eller annet klikkbart innhold inni en tooltip.

Tilgjengelighet

Tooltip-innholdet kobles til triggeren via aria-describedby
Vises ved både hover og fokus, slik at tastaturbrukere også får tilgang
Lukkes med Escape
Følger WAI-ARIA Tooltip-mønsteret

Props

TooltipProvider

Prop	Type	Default	Beskrivelse
`delayDuration`	`number`	`700`	Millisekunder før tooltip vises
`skipDelayDuration`	`number`	`300`	Millisekunder før forsinkelsen resettes etter lukking

Prop	Type	Default	Beskrivelse
`open`	`boolean`	—	Kontrollert åpen/lukket
`onOpenChange`	`(open: boolean) => void`	—	Kalles når tilstanden endres
`defaultOpen`	`boolean`	`false`	Om tooltip starter åpen

TooltipTrigger

Prop	Type	Default	Beskrivelse
`asChild`	`boolean`	`false`	Bruk child-elementet som trigger

TooltipContent

Prop	Type	Default	Beskrivelse
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Hvilken side av triggeren tooltip vises på
`sideOffset`	`number`	`4`	Avstand fra triggeren i piksler
`align`	`"start" \| "center" \| "end"`	`"center"`	Justering langs siden