Tooltip

Keterangan singkat yang muncul saat sebuah kontrol disentuh kursor atau menerima fokus keyboard: nama tombol ikon, teks yang terpotong, atau alasan sesuatu dikunci.

Dasar

Bungkus kontrolnya, tidak perlu menyambungkan apa pun sendiri. Tombol ikon tetap wajib punya namanya sendiri lewat aria-label; tooltip menambahkan keterangan, bukan menggantikan nama. Panahnya selalu menunjuk ke tengah kontrolnya, termasuk ketika panelnya bergeser agar tidak keluar layar.

Sisi dan jeda

Bawaannya muncul di atas kontrol dan berpindah ke bawah kalau ruang di atas tidak cukup. Jeda 200 ms menahan tooltip agar tidak berkedip saat kursor hanya melintas; :delay="0" untuk toolbar yang memang ingin langsung menjelaskan.

Teks yang terpotong

Pemakaian yang paling sering: nama panjang yang dipotong truncate di dalam tabel atau daftar. Beri tabindex="0" pada teksnya supaya pengguna keyboard juga bisa membacanya, bukan hanya pengguna tetikus.

  • PU-0042Gudang Logistik Waste4Change Cakung Blok B2 Lantai 3
  • PU-0043Kantor Perwakilan Bekasi Timur Jalan Ahmad Yani Nomor 88

Isi yang lebih kaya

Slot #content menerima elemen apa pun, misalnya pintasan keyboard. Teks panjang membungkus sendiri dan tidak pernah melebar melewati 16rem.

Kartu ringkas

variant="card" mengubah tooltip menjadi panel kecil di atas permukaan halaman: cukup untuk beberapa baris keterangan tentang siapa atau apa yang dirujuk sebuah nama. Jedanya lebih panjang (400 ms) supaya tidak berkedip saat kursor hanya melintas, dan isinya tetap bisa dibaca dengan memindahkan kursor ke atasnya.

Isinya keterangan saja. Jangan menaruh tautan atau tombol di dalamnya: kartu ini bisa hilang sebelum sempat diklik, dan menurut pola WAI-ARIA sebuah tooltip tidak boleh memuat kontrol. Kalau isinya perlu bisa diklik, pakai DropdownMenu atau Modal.

  • Penanggung jawab
  • Penanggung jawab

Belum ada profil yang dibuka.

API

Props

PropTipeDefaultKeterangan
textstring—Isi tooltip. Untuk isi yang lebih kaya, pakai slot content sebagai gantinya.
variant'chip' | 'card''chip'chip untuk keterangan pendek berlatar gelap; card untuk beberapa baris keterangan di atas permukaan halaman, misalnya detail seseorang.
side'top' | 'bottom''top'Sisi yang dicoba lebih dulu. Sisi sebaliknya dipakai hanya kalau ruangnya lebih lega.
delaynumber200 / 400Jeda dalam milidetik sebelum muncul saat disentuh kursor: 200 untuk chip, 400 untuk card yang isinya lebih banyak. Fokus keyboard tidak pernah menunggu.
disabledbooleanfalseMematikan tooltip tanpa mengubah markup. Tooltip yang sedang terbuka ikut ditutup.

Slots

SlotTipeDefaultKeterangan
default——Kontrol yang dijelaskan. Elemen pertama di dalamnya yang menerima aria-describedby.
content——Isi tooltip, menggantikan prop text. Pakai untuk menyisipkan pintasan keyboard atau ikon.

Kelas tambahan diteruskan ke pembungkusnya, yang berupa span dengan inline-flex. Pakai itu bila tooltip perlu ikut menyusut di dalam baris, seperti pada contoh teks terpotong.