Pembuat Tooltip CSS Buat tooltip murni CSS dengan posisi, panah, warna, dan gaya yang dapat disesuaikan.

🎨

Pembuat Tooltip CSS

Buat tooltip murni CSS dengan posisi, panah, warna, dan gaya yang dapat disesuaikan.

Pilih posisi tooltip

Pilih posisi atas, bawah, kiri, atau kanan untuk tooltip.

Atur gaya tooltip

Sesuaikan warna, ukuran font, padding, radius border, dan ukuran panah.

Salin CSS

Pratinjau tooltip dan salin kode CSS lengkap termasuk gaya panah.

Loading tool...

What Is Pembuat Tooltip CSS?

Generator Tooltip CSS membuat tooltip murni CSS yang tidak memerlukan JavaScript. Tooltip menyediakan informasi tambahan ketika pengguna mengarahkan kursor atau fokus pada elemen, menjadikannya penting untuk antarmuka web yang dapat diakses. Alat ini memungkinkan Anda menyesuaikan posisi tooltip (atas, bawah, kiri, atau kanan), warna latar belakang dan teks, ukuran font, padding, radius batas, dan ukuran panah. Panah tooltip dibuat menggunakan trik perbatasan CSS, dan penempatan diatur dengan posisi absolut relatif terhadap elemen induk. Kode yang dihasilkan mencakup gaya wrapper, tooltip, dan pseudo-elemen panah, memberi Anda solusi tooltip lengkap dan mandiri. Pratinjau menampilkan tooltip selalu terlihat sehingga Anda dapat melihat perubahan gaya dalam waktu nyata.

Why Use Pembuat Tooltip CSS?

Solusi murni CSS tanpa ketergantungan JavaScript yang diperlukan
Empat opsi posisi dengan panah yang terorientasi dengan baik
Kustomisasi lengkap warna, ukuran, dan spasi
Kode yang dihasilkan termasuk gaya wrapper, tooltip, dan panah

Common Use Cases

Tooltip Ikon

Tambahkan tooltip deskriptif ke tombol ikon saja untuk aksesibilitas yang lebih baik.

Petunjuk Bidang Formulir

Berikan petunjuk dan pesan validasi yang membantu pada input formulir.

Label Navigasi

Tampilkan label untuk item navigasi kompak saat diarahkan.

Visualisasi Data

Tambahkan tooltip ke elemen grafik dan titik data untuk konteks tambahan.

Technical Guide

Tooltip CSS menggunakan posisi absolut di dalam wrapper yang relatif diposisikan. Elemen tooltip diposisikan menggunakan top/bottom/left/right dan transform untuk pemusatannya. Panah dibuat menggunakan pseudo-elemen ::after dengan teknik segitiga perbatasan CSS-dengan menyetel batas transparan pada tiga sisi dan batas berwarna pada satu sisi, bentuk segitiga terbentuk. Tooltip ditampilkan/sembunyikan menggunakan pseudo-kelas :hover pada wrapper, dengan display atau visibility yang mengontrol visibilitas. Untuk aksesibilitas, pertimbangkan untuk menambahkan atribut role="tooltip" dan aria-describedby. Properti white-space: nowrap mencegah pengguliran teks dalam tooltip pendek. Untuk konten lebih panjang, atur lebar maksimum dan hapus white-space. Transisi dapat ditambahkan untuk animasi show/hide yang halus menggunakan opacity dan transform.

Tips & Best Practices

1
Tambahkan sedikit penundaan sebelum menampilkan untuk mencegah pemicu yang tidak disengaja
2
Gunakan aria-describedby untuk aksesibilitas pembaca layar
3
Jaga teks tooltip singkat-idealnya kurang dari 150 karakter
4
Uji posisi tooltip dekat tepi layar untuk mencegah pemotongan

Related Tools

Pembuat Tombol CSS

Desain tombol CSS kustom dengan warna, padding, border, bayangan, dan efek hover.

🎨 CSS & Design

Pembuat Kartu CSS

Buat desain kartu glassmorphic dengan pengaturan blur latar belakang, transparansi, dan bayangan.

🎨 CSS & Design

Pembuat Animasi CSS

Buat animasi keyframe CSS dengan efek preset dan waktu yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Transisi CSS

Buat transisi CSS dengan properti, durasi, easing, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah tooltip ini berfungsi di perangkat mobile?

Tooltip CSS :hover berfungsi di perangkat mobile dengan sentuhan, tetapi pertimbangkan menggunakan JavaScript untuk kontrol interaksi sentuh yang lebih baik.

Q Bagaimana saya menambahkan penundaan sebelum menampilkan?

Tambahkan transition-delay ke properti visibilitas dan opasitas tooltip untuk penampilan yang tertunda.

Q Bisakah saya membuat tooltip tetap terlihat saat diarahkan?

Ya, aplikasikan pseudo-kelas :hover ke elemen tooltip itu sendiri selain wrapper.

Q Apakah tooltip hanya CSS dapat diakses?

Untuk aksesibilitas penuh, tambahkan atribut ARIA. Solusi hanya CSS mungkin tidak cukup untuk pembaca layar.

Q Bagaimana saya mencegah tooltip dipotong?

Pastikan wrapper atau elemen induk memiliki overflow: visible dan periksa posisi dekat tepi viewport.

About This Tool

Pembuat Tooltip CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.