Komponen / Lapisan & umpan balik

Tooltip

Teks singkat yang muncul saat kontrol di-hover atau difokus untuk menjelaskan fungsinya. Tanpa caret, sesuai HIG.

React · BetaFigma · siapFigma Sumber

Placement

Top (bawaan), Bottom, Left, Right — sama dengan varian Placement di Figma. Bila ruang tidak cukup, tooltip berbalik sisi otomatis.

import { Button, Tooltip } from '@divistant/circca-react';

export default function Example() {
  // Hover atau fokus (Tab) tombol untuk melihat tooltip. Bila ruang tidak cukup, posisi berbalik otomatis.
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip content="Tampil di atas" side="top">
        <Button>Atas</Button>
      </Tooltip>
      <Tooltip content="Tampil di bawah" side="bottom">
        <Button>Bawah</Button>
      </Tooltip>
      <Tooltip content="Tampil di kiri" side="left">
        <Button>Kiri</Button>
      </Tooltip>
      <Tooltip content="Tampil di kanan" side="right">
        <Button>Kanan</Button>
      </Tooltip>
    </div>
  );
}

Menjelaskan akibat aksi

Pakai tooltip untuk melengkapi label yang ringkas, mis. ke mana invoice dikirim. Informasi wajib tetap ditulis di layar.

import { Button, Tooltip } from '@divistant/circca-react';
import { ArrowsClockwise, PaperPlaneTilt } from '@phosphor-icons/react';

export default function Example() {
  // Tooltip menjelaskan akibat aksi yang labelnya ringkas.
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip content="Kirim INV-2026-0192 ke email Rina Kartika (Finance)">
        <Button variant="primary" leadingVisual={PaperPlaneTilt}>Kirim invoice</Button>
      </Tooltip>
      <Tooltip content="Ambil ulang kurs dan harga terbaru" side="bottom">
        <Button leadingVisual={ArrowsClockwise}>Muat ulang</Button>
      </Tooltip>
    </div>
  );
}

Kelompok kontrol

TooltipProvider berbagi jeda: setelah satu tooltip tampil, tooltip lain di toolbar yang sama langsung tampil. Tanpa provider, Tooltip tetap bekerja (membungkus dirinya sendiri).

import { IconButton, TooltipProvider } from '@divistant/circca-react';
import { DownloadSimple, Funnel, Printer } from '@phosphor-icons/react';

export default function Example() {
  // Satu TooltipProvider untuk sekelompok kontrol: setelah tooltip pertama muncul,
  // tooltip berikutnya langsung tampil saat pointer berpindah (tanpa jeda ulang).
  return (
    <TooltipProvider delayDuration={400}>
      <div className="flex items-center gap-1">
        <IconButton variant="ghost" icon={Printer} label="Cetak PO-2026-0142" />
        <IconButton variant="ghost" icon={DownloadSimple} label="Unduh PDF" />
        <IconButton variant="ghost" icon={Funnel} label="Saring" />
      </div>
    </TooltipProvider>
  );
}