Tooltip

Komponen ini menawarkan maklumat ringkas apabila pengguna meletakkan tetikus ("hover") atau memberi fokus pada sesuatu elemen.

Source Storybook

Penggunaan

Import

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@govtechmy/myds-react/tooltip";

Anatomy

<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>

Contoh-contoh

Keadaan Tidak Terkawal vs Terkawal

Untuk menggunakan komponen ini dalam keadaan tidak terkawal, tetapkan prop defaultOpen kepada keadaan awal input.

Untuk menggunakan komponen dalam keadaan terkawal, gunakan prop open dan onOpenChange untuk mengendalikan keadaan secara programatik.

Props side boleh digunakan untuk melaraskan kedudukan TooltipContent. Nilai-nilai yang diterima ialah: left, right, top dan bottom.

Props

Komponen Tooltip dibina di atas TooltipPrimitive.Provider and TooltipPrimitive.Root. Sila rujuk senarai API lengkap dalam documentasi ini.

Prop	Type	Default
`defaultOpen`	`boolean`	-
`open`	`boolean`	-
`onOpenChange`	`function`	-
`delayDuration`	`number`	`700ms`
`disableHoverableContent`	`boolean`	-

TooltipContent

Komponen TooltipContent ini dibina di atas TooltipPrimitive.Portal dan TooltipPrimitive.Content. Sila rujuk senarai penuh API di dokumentasi ini.

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`arrowPadding`	`number`	-
`align`	`enum`	`center`
`side`	`enum`	`top`

TooltipTrigger membolehkan pengguna untuk berinteraksi atas tujuan menunjukkan "tooltip". Komponenen ini dibina menggunakan TooltipPrimitive.Trigger. Sila rujuk senarai penuh API di dokumentasi ini.

MYDS

Tooltip

Penggunaan

Contoh-contoh

Keadaan Tidak Terkawal vs Terkawal

Penempatan Tooltip

Props

Tooltip

TooltipContent

TooltipTrigger

Di halaman ini