• Beskrive et interaktiv element
  • Beskrive handlingen et interaktivt element gjør
  • Vise rikt innhold
  • Vise skjult innhold
  • Hjelpetekst eller feilmeldinger
Installer
KommandoInteraksjon
TabÅpner og lukker tooltip
EscLukker en åpen tooltip
SpaceLukker en åpen tooltip
EnterLukker en åpen tooltip
Popover
Ekstra høy tabell-celle med mye tekst
Finn gode løsninger for å vise mye innhold som er tilpasset situasjonen.
Tooltip brukt til å vise skjult innhold
Det er ikke brukervennlig eller lov til å vise skjult innhold med tooltip.
Tekstfelt med feilmelding under
Her er feilmeldingen synlig ved siden av tingen som har feilen.
Tekstfelt med feilmelding i en tooltip
Denne feilmeldingen dekker ikke UU-krav
children ReactElement<any, string | JSXElementConstructor<any>> & RefAttributes<HTMLElement>
Element tooltip anchors to @note Needs to be React.ReactElement, does not support multiple children/react fragment
open? boolean
Open state for contolled tooltip
defaultOpen?boolean
Tells tooltip to start in open state. Use sparingly synce hover/focus on other elements will close it @note "open"-prop overwrites this
placement?"top" | "right" | "bottom" | "left"
Orientation for tooltip
arrow?boolean
Toggles rendering of arrow
offset?number
Distance from anchor to tooltip
content string
Text-content inside tooltip
maxChar?number
Sets max allowed character length.
delay?number
Adds a delay in milliseconds before opening tooltip
keys? string[]
List of Keyboard-keys for shortcuts
className? string
ref? Ref<HTMLDivElement>
Tooltip extends HTMLDivElement