Cara Menambahkan Tip Alat WordPress (2 Cara: Plugin Gratis atau CSS)

Ada saat-saat ketika Anda perlu memberi informasi lebih banyak kepada pengguna situs web Anda, tetapi hanya tidak memiliki cukup halaman real estat. Anda selalu dapat menyertakan tautan ke halaman lain, tetapi dalam banyak kasus, pendekatan yang paling mudah adalah dengan menambahkan tooltip WordPress sederhana yang menampilkan semua informasi yang dibutuhkan pengguna.

Dengan tooltip WordPress, juga disebut tooltip CSS hover, semua informasi yang dibutuhkan pengunjung ada di sana dengan 'mengarahkan mouse ke' elemen yang tepat.

Pengantar CSS hover tooltips

Konsep tooltip WordPress sederhana. Mereka mengapung wadah yang 'pop-up' ketika Anda mengarahkan mouse ke elemen tertentu.

Biasanya, hover tooltips memberikan informasi tambahan yang tidak ingin Anda sertakan dalam desain aslinya.

Misalnya, jika Anda membuat tabel penetapan harga, tooltips dapat membantu Anda menjabarkan apa yang dilakukan setiap fitur tanpa meningkatkan desain:

Kasus penggunaan lainnya termasuk definisi kata, menambahkan sumber ke konten Anda, komentar editorial, peta, dan hampir semua elemen lain yang dapat Anda pikirkan.

Dua cara untuk menambahkan tooltip WordPress

WordPress memungkinkan Anda untuk menggunakan beberapa pendekatan dalam hal menambahkan tooltips ke situs web Anda. Anda dapat melakukannya secara manual (yang melibatkan penambahan beberapa kode) atau menggunakan plugin.

Kami akan mulai dengan menunjukkan Anda cara menambahkan tooltips dengan plugin tooltip WordPress gratis. Kemudian, kami akan menggali metode CSS manual.

1. Gunakan plugin WordPress tooltip

Inti dari menggunakan plugin adalah untuk menghemat waktu Anda menambahkan fitur secara manual. Dengan mengingat hal ini, Shortcodes Ultimate menawarkan salah satu implementasi tooltip termudah untuk pengguna WordPress.

Setelah Anda mengaktifkan plugin, Anda mendapatkan akses ke lusinan kode pendek yang dapat Anda gunakan untuk menambahkan apa pun dari tombol, ke slider, komidi putar gambar, pembagi, dll.

Tooltips, tentu saja, di antara daftar elemen yang didukung oleh Shortcodes Ultimate. Bahkan lebih baik, setiap kode pendek sepenuhnya dapat disesuaikan menggunakan pengaturan bawaan dan CSS.

Untuk memulai, buka Block Editor untuk halaman tempat Anda ingin menambahkan tooltip WordPress pertama Anda. Lalu, cari tombol Sisipkan Kode Sandi baru pada menu blok apa pun yang ada:

Segera, Anda akan melihat daftar kode pendek yang tersedia. Pilih opsi Tooltip:

Sekarang Anda mendapatkan kesempatan untuk menyesuaikan gaya tooltip Anda. Kami telah memutuskan untuk menggunakan desain gelap dasar dan menempatkannya di atas elemen yang Anda arahkan ke mouse:

Gulir ke bawah sampai Anda mencapai bidang Konten Tooltip dan masukkan teks yang Anda inginkan elemen untuk ditampilkan:

Perhatikan bahwa Anda juga dapat mengonfigurasi cara tooltip Anda seharusnya berperilaku. Opsi default akan menyembunyikan wadah dan teks sampai Anda mengarahkan mouse ke elemen induknya. Anda juga dapat mengonfigurasi tooltips sehingga mereka tidak muncul kecuali jika Anda mengklik pada elemen induk, tetapi itu cenderung membuat kerumitan bagi pengunjung.

Inilah yang akan terlihat seperti shortcode baru Anda di dalam Block Editor:

Dan jika Anda melihat pratinjau ini di ujung depan, inilah cara tooltip bekerja:

Perlu diingat, Anda dapat menambahkan tooltips hampir di mana pun Anda ingin menggunakan kode pendek yang tepat. Ini berlaku untuk teks, tabel, ikon, dan elemen lainnya secara teratur.

Namun, sebagai aturan praktis, Anda ingin menambahkan beberapa indikator visual agar pengguna tahu mereka harus mengarahkan mouse ke elemen induk. Variasi garis bawah atau warna berfungsi dengan baik. Anda juga bisa menggunakan emoji informasi (ℹ️).

2. Atur tooltip CSS hover secara manual

Pada bagian sebelumnya, kita berbicara tentang cara menambahkan tooltips melayang menggunakan plugin. Plugin ini pada dasarnya mengatur beberapa gaya CSS untuk Anda. Ini berarti Anda akan memilih dari daftar pengaturan, dan plugin menghasilkan kode pendek yang diperlukan.

Namun, tidak ada alasan mengapa Anda tidak dapat melakukan ini secara manual dengan kode. Cara termudah untuk menambahkan beberapa kelas CSS baru ke tema Anda adalah dengan menggunakan Customizer WordPress.

Untuk mengakses Customizer, navigasikan ke Appearance> Themes dari dashboard Anda dan cari tab CSS tambahan di bagian bawah menu sebelah kiri:

Selanjutnya, tambahkan tiga kelas CSS ke tema Anda:

1. Satu untuk wadah tooltip
2. Lain untuk teks
3. Yang terakhir untuk menyembunyikan segalanya

Berikut adalah contoh dasar dari bagaimana kode itu terlihat:

.tooltip-box {   position: relative;   display: inline-block; } .tooltip-box .tooltip-text {   visibility: hidden;   width: 100px;   background-color: black;   color: #fff;   text-align: center;   padding: 6px 0;   position: absolute;   z-index: 1; } .tooltip-box:hover .tooltip-text {   visibility: visible; }

Singkatnya, kode ini menghasilkan wadah kosong dan mengatur posisinya relatif terhadap elemen induk. Selanjutnya, itu menambahkan beberapa gaya ke teks yang ingin Anda sertakan, seperti padding, perataan, warna, dan lebar keseluruhan. Akhirnya, ini mengatur wadah untuk tetap tersembunyi sampai Anda mengarahkan kursor ke elemen induk.

Setelah Anda menyimpan CSS khusus ini ke tema Anda, Anda dapat memanggil tooltips dari halaman mana saja di situs web Anda. Untuk melakukannya, akses Block Editor untuk halaman tempat Anda ingin menambahkan tooltip.

Pilih blok di mana Anda ingin menambahkan tooltip pertama Anda dan pergi untuk opsi Edit sebagai HTML:

Sekarang, tambahkan a div yang berisi teks induk untuk tooltip Anda dan informasi yang Anda inginkan mengandung:

Parent text   Tooltip text here! 

Pastikan untuk menambahkan tooltip-text Kelas CSS untuk Anda div. Ini adalah kelas CSS yang Anda tambahkan ke tema Anda menggunakan penyesuai. Jika Anda menetapkan nama yang berbeda untuk kelas Anda, silakan dan ubah.

Inilah yang terlihat dari tooltip kami di dalam editor:

Jika Anda menyimpan perubahan ke halaman Anda dan menuju ujung depan, Anda dapat melihat perubahan:

Setelah Anda mengarahkan mouse ke teks induk, tooltip akan muncul:

Itu dia!

Ingat, Anda dapat menata tooltips hover CSS Anda seperti halnya elemen situs lainnya. Ini berarti menggunakan berbagai warna, memodifikasi wadah, dan banyak lagi, sehingga semuanya sesuai dengan gaya situs web Anda.

Untuk melakukan itu, Anda mungkin perlu mempelajari beberapa CSS dasar. Codecademy memiliki kursus CSS yang bagus.

Kesimpulan

1. Gunakan plugin tooltip WordPress yang menangani pengaturan untuk Anda.
2. Siapkan tool tool hover CSS secara manual menggunakan penyesuai.

Untuk beberapa cara lain untuk membuat situs WordPress yang lebih ramah pengguna, Anda juga dapat melihat panduan kami untuk meningkatkan navigasi WordPress dan menghapus kekacauan dari situs web Anda.

Apakah Anda memiliki pertanyaan tentang bagaimana menyesuaikan tooltips hover WordPress Anda? Mari kita bahas di bagian komentar di bawah!