Tooltip

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

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

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

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>

Prop	Type	Default	Description
content*	`ReactNode`	—	Isi tooltip.
side	`"top" \| "bottom"`	`"top"`	Posisi tooltip terhadap trigger.
delay	`number`	`400`	Delay tampil (ms).
children*	`ReactElement`	—	Trigger element tunggal yang bisa di-clone.

--bg-inverse

Background tooltip

--text-inverse

Warna teks tooltip

--shadow-md

Elevasi tooltip

--radius-sm

Rounded corners