Cara Menambahkan Tooltip Di Situs Web Elementor

Apakah Anda mencari cara untuk menambahkan tooltip ke situs web Elementor Anda? Jika itu masalahnya, Anda telah mendarat di halaman yang tepat.

Tip alat juga dikenal sebagai Tip Layar atau Tip Info yang menunjukkan potongan teks yang muncul saat mengarahkan kursor ke gambar atau teks tertentu. Tooltips ini ada di mana-mana di internet atau di desktop Anda sebagai teks alternatif, label, atau teks judul.

Setiap kali Anda membuka internet, Anda mungkin melihat gambar, ikon, atau judul apa pun; jika Anda mengarahkan penunjuk mouse ke bidang ini, Anda akan melihat label teks yang merupakan tooltip.

Demikian juga, dengan menggunakan fitur tooltip, Anda dapat melakukan hal yang sama di situs web Anda.

Dalam artikel ini, kami akan memandu Anda menambahkan tooltip dan menyesuaikan tampilannya menggunakan Elementor dan PowerPack Addons.

Jadi tanpa basa-basi lagi, mari kita lanjutkan.

Apa itu Tooltip?

Tooltip pada dasarnya adalah elemen UI kecil yang ditemui pengguna saat menggunakan browser internet, aplikasi, layar desktop, dll.

Mari kita coba memahami tooltip dengan namanya sendiri.

Lihat, seperti namanya, itu sebuah alat yang memberikan tip kepada pengguna tentang elemen atau bidang setiap kali ada pemicu. Pemicu ini dapat berupa arahkan kursor atau klik, sebagaimana terstruktur saat mengkodekannya.

Tooltips ini adalah kotak teks kecil yang berisi deskripsi singkat atau judul yang menunjukkan elemen, bidang, atau alat tertentu. Misalnya, lihat layar desktop Anda dan lihat ikon pada bilah alat atau menu mulai jendela.

Seperti yang Anda lihat, aplikasi di ' menu start windows ' menampilkan kotak teks kecil yang menunjukkan info tentang aplikasi itu. Sekarang, seperti inilah tooltip yang dapat Anda temukan di mana saja di sistem atau situs web Anda.

Jadi jika Anda ingin tooltips ini ditampilkan di seluruh situs web Anda, Anda perlu menambahkannya.

Bagaimana Tooltips Meningkatkan Pengalaman Pengguna di Situs Web Anda

Mari kita lihat bagaimana tooltips ini dapat membantu Anda meningkatkan pengalaman pengguna di situs web Anda.

Tooltips dapat ditambahkan ke area seperti itu di situs web Anda seperti:

• Elemen yang dapat diklik seperti gambar, ikon, dll.
• Judul mengarahkan teks atau tautan yang dapat diklik.
• Titik panas gambar.
• Produk e-niaga (Jika Anda menjalankan situs web WooCommerce.)

Oke, coba pikirkan, jika Anda menggunakan tooltip ini di semua area situs web Anda, betapa mudah dan bermanfaatnya bagi semua pengguna yang mengunjungi situs web Anda.

Ya, konsumen akan merasa nyaman, dan ini karena tooltips ini membantu pengguna dengan menawarkan indikasi teks yang relevan di mana pun ditempatkan di situs web Anda, dan ini akan meningkatkan pengalaman pengguna mereka.

Bagaimana Cara Menambahkan Tooltips di Elementor menggunakan PowerPack?

Dengan bantuan tooltip, Anda dapat menampilkan pesan penting melalui teks kepada pengguna Anda untuk pengalaman pengguna yang lebih baik.

Untuk menambahkan tooltip ke situs web Anda, Anda perlu menginstal dan mengaktifkan Elementor dan PowerPack Addons.

PowerPack Addons for Elementor memiliki lebih dari 80 widget praktis & kreatif, lebih dari 300 template yang telah dirancang sebelumnya, dan ekstensi yang berguna untuk menyempurnakan tampilan dan nuansa situs web Anda secara keseluruhan. Salah satu ekstensi tersebut adalah Tooltip yang dapat Anda gunakan untuk menampilkan teks tooltip di situs web Anda.

Jadi mari kita lihat bagaimana Anda dapat menambahkan tooltip ke situs web Anda menggunakan Elementor dan PowerPack.

Aktifkan Ekstensi Tooltip

Untuk menambahkan tooltip ke situs web Anda, pertama-tama aktifkan ekstensi tooltip.

Selanjutnya, buka Dasbor WordPress Anda, navigasikan ke Elementor, dan klik PowerPack.

Selanjutnya, navigasikan ke bagian Extensions dan aktifkan fitur Tooltips .

Setelah selesai, tekan tombol Simpan Perubahan .

Aktifkan Fitur Tooltip di Elementor

Untuk menambahkan Tooltip ke widget/bagian tertentu di situs web Elementor Anda, buka halaman Anda di editor Elementor. Pilih elemen tempat Anda ingin menampilkan tooltip, lalu buka Tab Lanjutan > PowerPack ; sekarang aktifkan fitur ' Tooltip ' .

Terakhir, fitur tooltip berhasil diaktifkan untuk ditampilkan di halaman website Anda.

Sesuaikan Fitur Tooltip

Sekarang setelah Anda mengaktifkan fitur tooltip, mari kita lihat fitur-fiturnya yang dapat Anda sesuaikan untuk menampilkan teks tooltip yang menarik.

Setelah Anda mengaktifkan fitur tooltip, semua opsi penyesuaian akan muncul yang dapat Anda gunakan untuk meningkatkan tampilan keseluruhannya.

Mari kita lihat semua pengaturan tooltip apa yang akan Anda dapatkan dengan fitur ini:

• Konten Tooltip: Tambahkan konten yang ingin Anda tampilkan di tooltip.
• Target: Dengan menggunakan opsi ini, Anda dapat memilih target sebagai elemen saat ini atau pemilih khusus.
• Pemicu: Pilih pemicu yang Anda inginkan dari opsi yang tersedia, seperti arahkan kursor atau klik .
• Posisi Tooltip: Pilih posisi tooltip sebagai top , bottom , left , atau right .
• Tampilkan Panah: Pilih opsi apakah akan menampilkan panah atau tidak.
• Animasi: Dengan menggunakan fitur ini, Anda dapat menerapkan animasi ke tooltip dari opsi yang tersedia seperti fade , fall , grow , slide , atau swing .
• Jarak: Opsi ini dapat mengatur jarak antara hotspot dan tooltip.
• Z-Index: Dengan opsi ini, Anda dapat menyesuaikan nilai Z-index untuk tooltip.

Sekarang setelah Anda menyesuaikan semua pengaturan tooltip, mari kita beralih ke langkah berikutnya.

Mari kita lihat semua opsi gaya yang tersedia untuk fitur tooltip:

• Warna Latar Belakang: Sesuaikan warna latar belakang tooltip menggunakan opsi ini.
• Warna Teks: Fitur ini dapat digunakan untuk menyesuaikan warna teks tooltip.
• Tipografi: Teks tipografi tooltip dapat dikustomisasi menggunakan opsi ini.
• Box Shadow: Anda dapat mengaktifkan fitur box shadow dengan opsi ini untuk menyempurnakan tampilannya.
• Jenis Perbatasan: Jika Anda ingin menambahkan batas ke tooltip, Anda dapat menggunakan opsi ini. Pilih jenis border dari pilihan yang tersedia seperti solid , dotted , dashed , doubled , dan groove .
• Radius Perbatasan: Jika Anda telah menerapkan batas ke tooltip, maka Anda dapat menyesuaikan radiusnya menggunakan opsi ini.
• Padding: Anda dapat menyesuaikan padding untuk tooltip; ini akan memungkinkan jarak antara teks tooltip dan perbatasan.
• Lebar: Anda juga dapat menyesuaikan lebar tooltip dengan opsi ini.

Setelah menyesuaikan semua fitur ini, tooltip yang baru saja kita buat akan terlihat seperti ini.

Membungkus!

Jadi seperti yang telah kita bahas, seluruh proses untuk menambahkan tooltip di situs web Elementor menggunakan PowerPack Addons. Namun, ini juga dapat dilakukan melalui pengkodean; jika Anda seorang pembuat kode profesional.

Kami harap tutorial ini membantu Anda menambahkan tooltip ke situs web Elementor Anda. Klik di sini untuk mendapatkan PowerPack Elementor Addons untuk membuat Tooltips yang luar biasa dan banyak bagian lain di situs web Elementor Anda.

Jika Anda mendesain halaman Elementor Anda dan mencari cara untuk menambahkan font kustom, artikel Cara Menambahkan Font Kustom ke Situs Web Elementor akan memandu Anda.

Jika Anda menghadapi masalah apa pun, silakan kirimkan pertanyaan Anda di bagian komentar.

Bergabunglah dengan kami di Twitter, Facebook, dan YouTube.