Softonic

Generator Tooltip CSS

Langkah 1 / 2
Berikutnya

Tooltip sering kali menjadi hal pertama yang membuat sebuah proyek buru-buru memakai pustaka JavaScript, padahal pseudo-elemen ::after sederhana yang dikendalikan atribut data-tooltip sudah mencakup 90% kasus nyata. Generator ini menghasilkan aturan .tooltip dan .tooltip::after yang persis Anda butuhkan: pilih posisi atas, bawah, kiri, atau kanan, atur warna latar dan teks, lalu salin blok tersebut ke stylesheet Anda.

Cara menyambungkan tooltip ke HTML Anda

  1. 1

    Pilih posisi

    Atas, bawah, kiri, atau kanan. Generator menggunakan `calc(100% + 8px)` beserta transform yang tepat sehingga balon tooltip menempel rapat pada elemen pemicu.

  2. 2

    Pilih warna

    Warna latar diterapkan pada balon, sedangkan warna teks diterapkan pada label tooltip. Demi keterbacaan, jaga rasio kontras minimal 4,5:1.

  3. 3

    Salin CSS

    Tempelkan blok yang dihasilkan ke dalam stylesheet Anda. Blok tersebut menyediakan aturan `.tooltip`, `.tooltip::after`, dan `:hover`.

  4. 4

    Beri markup pada elemen pemicu

    Tambahkan `class="tooltip" data-tooltip="Teks Anda"` ke elemen mana pun. `::after` membaca atribut tersebut melalui `content: attr(data-tooltip)`.

Tooltip CSS murni: apa yang Anda dapatkan dan apa yang Anda korbankan

Tooltip yang hanya menggunakan CSS berukuran kecil, cepat, dan tetap berfungsi meski JavaScript dinonaktifkan. Namun, karena berada dalam urutan sumber DOM, ia mewarisi sejumlah keterbatasan yang perlu Anda siasati saat mendesain.

Apa yang dilakukan CSS yang dihasilkan

  • Menetapkan elemen pemicu ke position: relative agar tooltip berposisi absolut yang tertambat padanya.
  • Menarik label dari content: attr(data-tooltip), sehingga Anda tidak pernah menduplikasi teks.
  • Menganimasikan opasitas dengan transition: opacity 0.15s, sehingga kemunculannya terasa cepat tetapi tidak mendadak.
  • Menggunakan pointer-events: none pada balon agar tidak pernah menghalangi klik pada elemen pemicu.

Penghitungan posisi

Posisi Aturan offset
atas bottom: calc(100% + 8px); left: 50%; translateX(-50%)
bawah top: calc(100% + 8px); left: 50%; translateX(-50%)
kiri right: calc(100% + 8px); top: 50%; translateY(-50%)
kanan left: calc(100% + 8px); top: 50%; translateY(-50%)

Catatan aksesibilitas

  • data-tooltip tidak dibacakan oleh pembaca layar. Jika informasi itu penting, sandingkan dengan aria-label atau teks yang terlihat.
  • Pengguna keyboard memerlukan :focus-visible selain :hover. Perluas aturan yang dihasilkan menjadi .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Tooltip yang terpotong oleh overflow: hidden pada elemen leluhur akan hilang. Pindahkan elemen pemicu keluar dari kontainer pemotong, atau beralih ke popover yang dirender dengan JavaScript untuk antarmuka yang padat.

Pertanyaan yang Sering Diajukan

Pseudo-elemen menjaga DOM tetap rapi, menghindari duplikasi teks label, dan memungkinkan Anda menata gaya tooltip tanpa khawatir tanpa sengaja cocok dengan elemen lain. Konsekuensinya, konten ::after tidak dapat diindeks oleh teknologi bantu, jadi perkuat teks penting dengan aria-label.

Ya, tambahkan pseudo-elemen kedua, misalnya .tooltip::before, yang dibentuk sebagai kotak berlebar dan tinggi nol dengan garis batas berwarna. Ini adalah trik segitiga CSS klasik; alat CSS Triangle Generator dalam rangkaian ini menghasilkan deklarasi garis batas yang persis Anda butuhkan.

Tambahkan transition-delay: 0.3s ke aturan ::after, tetapi setel ulang ke nol saat kursor keluar; atau gunakan transition: opacity 0.15s 0.3s; untuk menunda kemunculan tanpa menunda penghilangannya.

Posisi dan warna yang Anda pilih dikirim ke server kami untuk menghasilkan CSS, tetapi tidak disimpan atau digunakan kembali. Pada halaman bertahap, nilai tersebut dibawa dalam tautan antar langkah; pada tampilan satu halaman, tidak ada yang disimpan.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Alat ini tersedia dalam bahasa lain