Live Docs

Feedback /

stable

Tooltip

Hint kontekstual saat hover/focus. Cocok untuk klarifikasi label singkat dan icon-only actions.

import { Tooltip } from "@naraya/ui";

Overview

Tooltip harus singkat dan non-kritis. Jangan taruh informasi wajib atau aksi penting di dalam tooltip saja.

Examples

Default (top)

<Tooltip content="Simpan perubahan">
  <Button size="sm">Hover me</Button>
</Tooltip>

Bottom side

<Tooltip content="Detail tambahan" side="bottom">
  <Button>Info</Button>
</Tooltip>

Custom delay

<Tooltip content="Muncul lebih cepat" delay={150}>
  <Button>Quick help</Button>
</Tooltip>

Icon trigger

Hover icon

<Tooltip content="Informasi tambahan field ini">
  <button aria-label="Informasi field"><Info size={16} /></button>
</Tooltip>

Props

PropTypeDefaultDescription
content*ReactNodeIsi tooltip.
side"top" | "bottom""top"Posisi tooltip terhadap trigger.
delaynumber400Delay tampil (ms).
children*ReactElementTrigger element tunggal yang bisa di-clone.

Tokens Used

--bg-inverse

Background tooltip

--text-inverse

Warna teks tooltip

--shadow-md

Elevasi tooltip

--radius-sm

Rounded corners

Accessibility

  • Tooltip terhubung ke trigger via aria-describedby saat visible.
  • Trigger harus tetap bisa fokus keyboard untuk memunculkan tooltip.
  • Jangan gantikan label utama dengan tooltip semata.