Panduan langkah demi langkah untuk membuat tooltips CSS murni

Saya baru-baru ini mengerjakan tutorial singkat tentang membuat tooltips sederhana menggunakan CSS murni (dan tidak ada elemen HTML atau JavaScript tambahan). Saya kemudian menggunakan teknik ini dalam proyek saya sendiri, dan menemukan beberapa trik untuk memperbaikinya.

Artikel ini adalah tutorial langkah demi langkah yang akan membantu Anda memahami trik CSS ini sehingga Anda juga dapat membuat tooltips CSS murni.

Di akhir posting ini, Anda akan tahu cara menambahkan tooltip ke elemen apa pun dengan menambahkan atribut sederhana.

Masalah

Saya perlu membuat keterangan alat khusus untuk proyek saya.

Saya memulai dengan Googling "CSS Tooltip Generator". Saya menemukan beberapa generator. Pendekatan mereka adalah menambahkan rentang dengan posisi absolut di dalam elemen yang Anda inginkan untuk keterangan alat.

Tapi saya sudah memiliki proyek yang tidak lengkap. Saya tidak ingin kembali dan menambahkan semua elemen span ini ke seluruh proyek saya. Ini akan memakan waktu dan akan memperumit HTML saya. Pasti ada cara yang lebih baik.

Akhirnya, saya menemukan tutorial luar biasa di YouTube tentang tooltips. Trik cerdas yang digunakan adalah membuat tooltip menggunakan pemilih :: beforedan :: afterCSS. Anda bisa menonton videonya di sini.

Trik ini cerdas dan bersih, tetapi tidak cukup umum.

Memperbaiki solusi

Pada bagian ini, saya akan membuat trik ini lebih umum dan kita akan menemukan lebih banyak tentang beberapa properti CSS. Inilah yang pada akhirnya ingin kami lakukan:

 click here !! 

Tidak hanya itu, kami ingin dapat menentukan posisi tooltip dengan mudah:

 click here !! 

Pertama - seperti yang disebutkan dalam video - kami akan menambahkan elemen beforedan afterpseudo ke tombol.

::afterdan ::beforemerupakan elemen pseudo, yang memungkinkan Anda memasukkan konten ke halaman dari CSS sebelum atau setelah konten elemen. Mereka bekerja seperti ini:

div::after { content: “after”;}div::before { content: “before”;}

Hasilnya terlihat seperti ini:

 before after 

Mari kita telusuri langkah demi langkah ini

Langkah 1: kami akan menambahkan atribut tooltip seperti ini:

 click Me !!  

Kami membutuhkan ::afterdan ::beforeelemen semu. Ini akan menjadi persegi panjang sederhana dengan konten tooltip. Kami membuat persegi panjang sederhana dengan CSS dengan menambahkan perbatasan di sekitar elemen kosong yang kami buat dengan contentproperti.

The ::beforepseudo-elemen yang digunakan untuk menampilkan konten tooltip. Kami menambahkannya dengan properti contentdan mengekstrak nilai atribut tooltip. Nilai konten dapat berupa string, nilai atribut dari elemen seperti contoh kita, atau bahkan gambar dengan url(path/image.png).

Untuk membuat ini berfungsi, posisi elemen tombol harus relatif. Dengan kata lain, posisi semua elemen di dalam tombol relatif terhadap posisi elemen tombol itu sendiri.

Kami juga menambahkan beberapa trik posisi untuk membuat tooltip di tengah dengan properti transform dan ini hasilnya.

Inilah CSS kami:

Langkah 2: kita hanya bermain dengan elemen ::beforedan ::afterpseudo untuk membuat posisi tooltip. HTML tombol kita akan terlihat seperti ini:

 click here !! 

Posisi tooltip dapat berupa: kanan, kiri, atas, atau bawah.

langkah 3 : di langkah terakhir ini, kami akan menambahkan animasi hover sederhana ke tooltip.

CodePen ini menunjukkan hasil akhirnya (dan Anda dapat mengklik untuk melihat kode akhir):

Jika Anda sudah familiar dengan React, periksa My post:

Memperkenalkan reactjs-popup? - Modal, Tip alat dan Menu - Semua dalam satu

T artikelnya adalah tentang memberi Anda gambaran sederhana dari apa yang dapat Anda lakukan dengan reactjs-popup dan bagaimana menggunakannya effectively.h ackernoon.com

Terima kasih sudah membaca! Jika menurut Anda orang lain harus membaca ini, tekan? tombol, tweet, dan bagikan postingan. Ingatlah untuk mengikuti saya di Medium sehingga Anda bisa mendapatkan pemberitahuan tentang posting saya di masa mendatang.

Baca cerita lainnya //elazizi.com/