Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. CSS
Webdesign

Cara Membuat Keajaiban, Animasi Tooltips dengan CSS

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Tooltips adalah cara yang bagus untuk meningkatkan UI saat pengguna anda memerlukan konteks tambahan untuk ikon keren itu, atau ketika mereka menginginkan kepastian untuk mengeklik sebuah tombol, atau mungkin teks tersembunyi untuk mengikuti gambar. Mari kita membuat beberapa tooltips animasi, saat ini, tanpa pengetahuan tapi dengan HTML dan CSS.

Demo

Inilah yang sedang kita jalani:

Sebelum kita tenggelam dalam masalah ini, mari kita mengintip apa yang sebenarnya sedang kita buat. Tujuan utamanya adalah memiliki cara sederhana untuk menambahkan tooltip, jadi kami akan melakukannya dengan menambahkan atribut tooltip khusus:

Catatan tentang Aksesibilitas dan Kemampuan

Jika anda mencari yang sesuai dengan 508-tooltip, atau memerlukan tooltips yang lebih cerdas dengan deteksi tumpukan pada kontainer dan / atau mendukung untuk konten HTML vs. teks biasa, ada banyak solusi yang menggunakan skrip pihak ketiga untuk menyelesaikan kebutuhan anda.

"JavaScript sangat penting untuk membuat komponen interaktif yang mudah diakses." – Sara Soueidan, Membangun tooltip bantuan yang dapat diakses sepenuhnya ... lebih sulit daripada yang saya duga.

Tutorial ini tidak secara khusus menangani kebutuhan aksesibilitas. Anda tahu pengguna anda dan apa yang mereka butuhkan, jadi pastikan untuk mempertimbangkan kebutuhan mereka dalam hal ini juga.

Mari Kita Tetapkan Beberapa Harapan

  • Tidak Memerlukan JavaScript.
  • Kami akan menggunakan seleksi atribut (bukan nama class), dengan menyatukan pola pencocokan CSS.
  • Menambahkan ke elemen DOM yang ada (tidak ada elemen baru yang diperlukan dalam markup Anda *)
  • Contoh kode terbebas dari prefiks (Tambahkan prefiks vendor untuk browser target anda jika diperlukan)
  • Asumsikan ketika proses mouseover / hover untuk memicu tooltips
  • Hanya tooltips teks biasa (HTML, gambar, dll tidak didukung)
  • Animasi halus saat memanggil tooltips

Baiklah! Mari kita buat perahu ini!

Oh tunggu. Kami memiliki tanda bintang untuk perjanjian diawal, tentang "tidak memerlukan markup ekstra". Ini ajaib sekali. Tooltips kami tidak benar-benar membutuhkan elemen DOM tambahan karena semuanya terdiri dari elemen semu (seuatu seperti ::before dan ::after) yang dapat kami kontrol melalui CSS.

Jika Anda sudah menggunakan elemen-elemen semu dari rangkaian gaya lain dan anda menginginkan tooltip pada elemen tersebut, anda mungkin perlu merestrukturisasi sedikit.

Bukan berpesta Tidak Seperti pesta Tooltip!

Tunggu. Gremlins! Satu lagi peringatan: Dalam menempatkan CSS. Agar tooltip berfungsi dengan benar, elemen induknya (hal yang harus ditempelkan pada tooltip) perlu dilakukan.

  • position: relative, atau
  • Posisi: absolut, atau
  • position: fixed

Pada dasarnya, apa pun selain posisition: static - itu adalah mode posisi default yang ditetapkan ke hampir semua elemen oleh browser. Tooltip diposisikan secara mutlak dan karenanya mereka perlu mengetahui batasan-batasan yang memiliki makna yang seharusnya. Urutan posisi standar static tidak menyatakan batasannya sendiri dan tidak akan memberikan tooltips kita suatu konteks untuk dipaksakan, sehingga tooltips akan menggunakan elemen parental terdekat berikutnya yang memiliki batas yang dideklarasikan.

Anda harus memutuskan posisi mana yang paling sesuai dengan cara anda menggunakan tooltips. Tutorial ini mengasumsikan position: relative untuk elemen induk. Jika UI anda bergantung pada elemen yang benar-benar diposisikan, maka beberapa restrukturisasi (markup tambahan) mungkin juga diperlukan untuk menerapkan tooltip pada elemen tersebut.

Mari masuk dan lihat apa yang terjadi.

Atribut Selector; Penyegaran Singkat

Sebagian besar aturan CSS ditulis dengan nama kelas dalam pikiran, seperti .this-thing, namun CSS memiliki beberapa tipe selector. Tooltips ajaib kita akan menggunakan selector atribut tersebut–itulah notasi kurung siku:

Saat browser menemukan hal seperti ini:

Itu akan memberi tahu bahwa perlu diterapkan aturan [foo] karena tag <span> memiliki atribut bernama foo. Dalam kasus ini, span itu sendiri akan memiliki latar belakang hitam tembus cahaya dengan teks putih.

Elemen HTML memiliki berbagai atribut bawaan, namun kita juga bisa menyusunnya sendiri. Seperti foo, atau tooltip. Secara default, HTML tidak tahu apa artinya ini, tapi dengan CSS kita bisa memberi tahu HTML apa artinya ini.

Mengapa Atribut Selector?

Kami akan menggunakan atribut selector terutama untuk pemisahan masalah. Menggunakan atribut di atas nama kelas tidak membuat kita mendapatkan poin tamabahandalam masalah kekhususan; Kelas dan atribut memiliki kekhususan yang sama. Namun, dengan menggunakan atribut kita bisa menjaga konten kita dengan konten sebagai atribut HTML yang bisa memiliki nilai, sedangkan nama kelas tidak.

Pertimbangkan nama kelas .tooltip vs atribut [tooltip] pada contoh kode ini. nama kelas adalah salah satu nilai atribut [class] sedangkan atribut tooltip memiliki nilai, yaitu teks yang ingin kita tampilkan.

Saatnya Memasukan Bahan Kimira ke dalam Tooltip

Tooltips kami akan menggunakan dua atribut yang berbeda:

  • tooltip: ini memegang konten tooltip (string teks biasa)
  • flow: opsional; hal ini memungkinkan kita untuk mengontrol bagaimana cara menampakkan tooltip. Ada banyak penempatan yang dapat kami dukung namun kami akan mencakup empat penempatan umum:
    Atas, Kiri, Kanan, Bawah.

Sekarang, mari kita siapkan pekerjaan dasar untuk semua tooltips. Aturan dari langkah 1-5 berlaku untuk semua tooltip terlepas dari flow seperti apa yang akan kita berikan kepada mereka. Langkah 6-7 memiliki perbedaan antara berbagai nilai pada flow.

1. Relativitas

Ini untuk elemen induk tooltip. Mari kita menetapkan sebuah direktif posisi sehingga posisi absolute dari bagian tooltip (elemen-semu ::before dan ::after) diposisikan dalam konteks elemen induk ini dan tidak dalam konteks halaman pada elemen besar atau grand-parent atau beberapa Elemen luar lainnya ke cabang DOM.

2. Waktunya Element-Semu

Inilah waktunya untuk elemen-elemen semu. Di sini kita akan mengatur properti umum untuk kedua bagian ::before dan ::after. Properti konten inilah yang sebenarnya membuat elemen-semu bekerja, tapi kita akan sampai di sana segera.

3. Bagian Kecil (Dink)

Saya tidak tahu agar "dink" menjadi masuk akal, saya selalu menyebutnya begitu. Ini adalah bagian runcing segitiga kecil yang memberi tooltips gelembung ucapan mereka dengan menunjuk benda yang memanggilnya. Perhatikan bahwa kita menggunakan transparent untuk warna garis; kita akan menambahkan warnanya nanti sebagai cara kita menambahkannya tergantung pada flow tooltip.

Ini bukan salah ketik yang berisi content:' '; deklarasi ini memiliki string kosong untuk sebuah nilai. Kami tidak menginginkan apapun di sana, tapi kami membutuhkan properti itu untuk elemen-semu yang ada.

Untuk membuat segitiga kita mendefinisikan batas yang solid dengan beberapa ketebalan pada kotak kosong (tanpa isi) tanpa lebar dan tidak tinggi, dan hanya memberi satu sisi kotak warna garis. Untuk lebih jelasnya lihat tutorial berikut ini:

4. Gelembung!

Inilah intinya dari hal ini. Perhatikan content:attr(tooltip) yang mengatakan, "Elemen-semu ini harus menggunakan nilai atribut tooltip sebagai isinya." Inilah sebabnya mengapa menggunakan atribut di atas nama kelas sangatlah hebat!

Perhatikan nilai z-index untuk kedua hal kecil (dink) dan gelembung. Ini adalah nilai yang berubah-ubah, namun perlu diingat bahwa nilai z-index adalah relatif. Artinya: nilai z-index 1001 di dalam sebuah elemen dengan z-index 3 hanya berarti elemen 1001 akan menjadi elemen paling atas di dalam container z-index: 3.

z-index gelembung setidaknya harus satu langkah dibawah dari z-index dink itu. Jika sama dengan atau lebih tinggi dari dink, anda bisa berakhir dengan efek pewarnaan yang tidak konsisten pada dink jika tooltips anda menggunakan box-shadow.

Untuk melihat lebih jelas tentang properti z-index, lihatlah tutorial berikut ini:

5. Tindakan Interaksi

Tooltips kita diaktifkan dengan mengarahkan mouse ke elemen dengan tooltip ... Hampir.

Jika Anda melihat kembali gaya blok kami di Langkah 2, Anda harus melihat bahwa kami telah menggunakan opacity: 0; bersama dengan display: none; untuk bagian tooltip kami. Kami melakukan ini sehingga kami bisa menggunakan efek animasi CSS saat tooltips muncul dan disembunyikan.

Properti display tidak bisa dianimasikan, tapi opacity bisa! kita akan membahas animasi di akhir. Jika anda tidak peduli dengan tooltips animasi, cukup hapus opacity: 0; deklarasikan dari langkah 2 dan abaikan animasi di langkah 7.

Hal terakhir yang kita perlukan yang masih berlaku untuk semua tooltips adalah cara untuk menekan tooltip jika tidak memiliki konten. Jika Anda mengisi tooltips dengan semacam sistem dinamis (Vue.js, Angular, atau React, PHP, dll.), kita tidak menginginkan gelembung kosong yang konyol!

6. Mengatur Aliran (Flow)

Langkah ini bisa menjadi agak rumit karena kami akan menggunakan beberapa penyeleksi yang tidak begitu umum untuk membantu tooltips kami menangani penempatan berdasarkan nilai flow (atau kekurangannya).

"Hal-hal aneh sedang terjadi di Circle-K." — Ted Theodore Logan

Sebelum kita beralih ke gaya, mari kita lihat beberapa pola pemilih yang akan kita gunakan.

Ini memberitahu browser: "Untuk semua elemen dengan atribut tooltip yang tidak memiliki atribut flow, atau memiliki flow dengan nilai yang dimulai dengan 'up': terapkan gaya ini ke elemen-semunya ::before"

Kami menggunakan pola di sini sehingga ini dapat diperluas ke aliran lain tanpa perlu mengulang CSS begitu banyak. Pola flow^="up" ini menggunakan ^= (dimulai dengan) pencocokan. Hal ini memungkinkan gaya untuk juga diberlakukan untuk atas-kanan dan atas-kiri anda ingin menambahkan kontrol terhadap aliran tersebut. Kami tidak akan membahasnya di sini, namun Anda dapat melihatnya dalam demo tooltip asli di CodePen.

Berikut adalah blok CSS untuk ke empat alur tutorial ini.

Atas (default):

Bawah:

Kiri:

Kanan:

7. Semua Hal tentang Animasi

Animasi itu menakjubkan. Animasi dapat:

  • Membantu pengguna merasa nyaman
  • Membantu pengguna dengan kesadaran terhadap ruang UI anda
  • Perhatikan hal-hal yang perlu dilihat
  • Melunakkan elemen UI yang seharusnya menjadi biner on/off menjadi efek yang menakjubkan

Tooltips kami akan masuk ke dalam deskripsi terakhir ini. Alih-alih memiliki gelembung teks muncul dan muncul dalam sekejap, mari kita membuatnya lebih lembut.

@keyframes

Kita membutuhkan dua animasi @keyframe. Tooltip atas/bawah akan menggunakan tooltips-vert keyframe, dan tooltip kiri/kanan akan menggunakan keyframe tooltips-horz. Perhatikan di kedua keyframe ini, kami hanya menentukan keadaan akhir tooltips yang diinginkan. Kita tidak perlu tahu dari mana asalnya (tooltips sendiri memiliki informasi gaya itu). Kami hanya ingin mengendalikan ke mana mereka pergi.

Sekarang, kita perlu menerapkan keyframes ini ke tooltips saat pengguna melakukan hover di atas elemen pemicu (elemen dengan atribut [tooltip]). Karena kita menggunakan berbagai aliran untuk mengendalikan bagaimana tooltips akan muncul, kita perlu mengidentifikasi kemungkinan gaya tersebut.

Gunakan :hover untuk Melewati Pengaturan Animasi

Ingat kita tidak bisa membuat animasi untuk properti display, tapi kita bisa memberi tooltips efek yang memudar dengan memanipulasi opacity. Kami juga menghidupkan properti transformasi yang memberi tooltips gerakan halus seolah-olah mereka terbang untuk menunjukkan unsur pemicunya.

Perhatikan kata kunci forwards dalam deklarasi animasi. Ini memberitahu animasi agar tidak dimuat ulang setelah selesai, tapi terus maju dan tetap melakukan sampai akhir.

Kesimpulan

Kerja yang fantastis! kami banyak mengulas tutorial ini, dan sekarang ada koleksi tooltips yang rapi untuk ditunjukkan pada kerja keras kami:

Kita hanya mempelajari sebagian hal kecil dari apa yang dapat dilakukan dengan CSS tooltips. Bersenang-senanglah dalam mempelajari hal ini, teruslah bereksperimen, dan ciptakan resep anda sendiri!

Tutorial CSS UI lainnya

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.