Tooltip

@/components/ui/Tooltip

Kort, invertert hjelpetekst ved hover/fokus på ETT element — bg text-primary, tekst bg, label-13.

Når brukes den

Å navngi eller forklare et ikon-only-element (f.eks. en IconButton) med noen få ord, uten å bruke plass i layouten.
INGEN tooltip vises på berøring (`pointer: coarse`) — komponenten rendrer da bare barnet uendret. Innholdet i `content` MÅ derfor finnes et annet sted for touch (synlig tekst, `aria-label`, en `Callout`) — Tooltip er et supplement, ikke eneste kilde.
Ikke bruk til noe brukeren MÅ lese for å fullføre en oppgave — det hopper over touch helt.
Bytter IKKE ut eksisterende `title=`-attributter i appen ennå — det er en egen, senere sveip.

Sider

`side` velger hvilken kant tooltipen henger fra — default "top".

<Tooltip content="Vises over" side="top">
  <Button variant="secondary" size="sm">Topp</Button>
</Tooltip>

På en IconButton

Vanligste bruk: navngi en ikon-only-knapp. `aria-label` på IconButton dekker skjermleser uansett — tooltipen er for seende mus-/tastaturbrukere.

<Tooltip content="Rediger navn">
  <IconButton aria-label="Rediger navn"><Rediger size={16} /></IconButton>
</Tooltip>

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

content *

ReactNode

—

Teksten som vises. Kort — én setning.

side

'top' | 'bottom' | 'left' | 'right'

'top'

Hvilken kant tooltipen henger fra.

delay

number

200

Millisekunder før den vises ved hover. Skjules umiddelbart.

children *

ReactElement

—

Ett enkelt fokuserbart/hoverbart element.