Komponen / Lapisan & umpan balik
Tooltip
Teks singkat yang muncul saat kontrol di-hover atau difokus untuk menjelaskan fungsinya. Tanpa caret, sesuai HIG.
Import
tsx
import { Tooltip, TooltipProvider } from '@divistant/circca-react';Props · Tooltip
Juga menerima prop Content Radix Tooltip (align, alignOffset, collisionPadding, avoidCollisions, …).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| content | ReactNode | — | Isi tooltip. Singkat, satu baris bila memungkinkan. |
| children | ReactElement | — | Pemicu yang bisa difokus dan meneruskan ref (Button, IconButton, <a>). |
| side | 'top' | 'bottom' | 'left' | 'right' | 'top' | Placement di Figma. |
| sideOffset | number | 6 | Jarak ke pemicu (px). |
| delayDuration | number | 500 | Jeda sebelum tampil (ms). Bawaan dari TooltipProvider. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Kontrol status terbuka (opsional). |
| disabled | boolean | false | Matikan tooltip tanpa mengubah pemicu. |
| className | string | — | Kelas tambahan untuk panel tooltip. |
Props · TooltipProvider
Opsional. Pasang sekali di layout atau di sekitar toolbar.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| delayDuration | number | 500 | Jeda sebelum tooltip pertama tampil (ms). |
| skipDelayDuration | number | 300 | Selang waktu di mana tooltip berikutnya tampil tanpa jeda. |
Sumber
Kode komponen ada di packages/react/src/components/tooltip. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.