Tooltip

React API

Tooltip

• children

  Komponentin sisältö Elementti, johon kohdistettaessa tooltip avautuu, popover-variantille ei pakollinen

  Tyyppi: ReactNode & Element

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• content

  Pakollinen

  Tooltipin sisältö

  Tyyppi: string | Element

• id

  Työkaluvihjeen ikonille tai painikkeelle välitettävä id.

  Tyyppi: string

• isPopover

  Asettaa käyttöön popover-variantin, joka avautuu hoverin ja kohdistuksen sijaan klikkauksella

  Tyyppi: boolean

• placement

  Tooltipin ensisijainen asemointi. Huomaa, että tilan loppuessa Tooltip voi siirtyä avautumaan toiselta puolelta.

  Tyyppi: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"

  Oletusarvo: top

• popoverIcon

  Popover-tooltipin aktivoiva ikoni

  Tyyppi: Element

  Oletusarvo: <Info size="s" />

• popoverIconLabel

  Popover-ikonin aria-label -teksti

  Tyyppi: string

  Oletusarvo: Työkaluvihje

• showCloseButton

  Hallitsee sulje-painikkeen näyttämistä Tooltipille (Popover-variantille sulje-painike näytetään aina)

  Tyyppi: boolean

• size

  Mukautettu komponentin kokoluokka

  Tyyppi: "xs" | "sm" | "md"

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten. Tooltipin aktivoivalle elementille (esim. Button) välitettävä data-testid-attribuutti. TestId-proppia voi käyttää kun aktivoiva elementti on KDS-komponentti, joka tukee testId-proppia. Natiiville HTML-elementille voi antaa suoraan data-testid-attribuutin.

  Tyyppi: string