Toggletip

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

En toggletip ser ut som en tooltip, men oppfører seg som en liten dialog. Den brukes til å forklare et begrep eller gi en kort utdyping i en liten popover – typisk en definisjonslenke i løpende tekst.

I motsetning til en hover-tooltip åpnes den ved klikk, så den fungerer også på touch og for tastaturbrukere. Kun én toggletip kan være åpen om gangen.

Egnet til:

Å forklare et fagbegrep inline i løpende tekst (definition-varianten).
Å gi en kort utdyping knyttet til en label eller verdi (info-varianten med ikon).

Uegnet til:

Lengre innhold, flere handlinger eller skjemaer – bruk Modal eller Drawer i stedet.
Informasjon brukeren må se for å fullføre en oppgave – innholdet er skjult til toggletippen åpnes.

Relaterte komponenter

Eksempel

Definition-varianten gjør et begrep i teksten klikkbart. Husk aria-label på ToggletipContent, siden popoveren ikke har en overskrift.

<UNSAFE_Toggletip>
  <UNSAFE_ToggletipTrigger variant="definition">borettslag</UNSAFE_ToggletipTrigger>
  <UNSAFE_ToggletipContent aria-label="Forklaring av borettslag">
    Et borettslag er et selskap som eier en eller flere boligeiendommer, der du
    kjøper en andel som gir deg borett til en bestemt bolig.
  </UNSAFE_ToggletipContent>
</UNSAFE_Toggletip>

Info-varianten er en frittstående ikonknapp. Send ikonet som children, og husk en beskrivende aria-label siden knappen ikke har synlig tekst.

<span className="inline-flex items-center gap-1">
  Felleskostnader
  <UNSAFE_Toggletip>
    <UNSAFE_ToggletipTrigger aria-label="Mer om felleskostnader" variant="info">
      <InfoCircle />
    </UNSAFE_ToggletipTrigger>
    <UNSAFE_ToggletipContent aria-label="Mer om felleskostnader">
      Felleskostnader dekker borettslagets felles utgifter, som vedlikehold,
      forsikring, renovasjon og eventuell felles gjeld.
    </UNSAFE_ToggletipContent>
  </UNSAFE_Toggletip>
</span>

Props

Toggletip

Prop	Description	Default
`children?`		-
`isOpen?`		-
`defaultOpen?`		-
Events
`onOpenChange?`		-

ToggletipTrigger

Prop	Description	Default
`form?`		-
`autoFocus?`		-
`isPending?`		-
`isDisabled?`		-
`type?`		'button'
`preventFocusOnPress?`		-
`formAction?`		-
`formEncType?`		-
`formMethod?`		-
`formNoValidate?`		-
`formTarget?`		-
`name?`		-
`value?`		-
`excludeFromTabOrder?`		-
`render?`		-
`variant?`	Visual preset: `definition` (an inline, dashed-underlined term) or `info` (a 44x44 icon button). Omit it to style the trigger yourself — children and appearance are then up to you.	-
Events
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
Styles
`style?`		-
`className?`	Additional class name for the trigger button.	-
Accessibility
`id?`		-
`aria-controls?`		-
`aria-current?`		-
`aria-describedby?`		-
`aria-details?`		-
`aria-disabled?`		-
`aria-expanded?`		-
`aria-haspopup?`		-
`aria-label?`		-
`aria-labelledby?`		-
`aria-pressed?`		-

ToggletipContent

Prop	Description	Default
`render?`		-
`shouldCloseOnInteractOutside?`		-
`isEntering?`		-
`isExiting?`		-
`isKeyboardDismissDisabled?`		false
`isOpen?`		-
`defaultOpen?`		-
`placement?`		'bottom'
`containerPadding?`		12
`offset?`		8
`crossOffset?`		0
`shouldFlip?`		true
`triggerRef?`		-
`boundaryElement?`		document.body
`arrowRef?`		-
`scrollRef?`		overlayRef
`shouldUpdatePosition?`		true
`maxHeight?`		-
`arrowBoundaryOffset?`		0
`isNonModal?`		-
`trigger?`		-
Events
`onOpenChange?`		-
Styles
`style?`		-
`className?`	Additional class name for the popover.	-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-