Cara Menempatkan Hover Tooltips Di Mana Saja di Halaman Anda dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara membuat dan menempatkan tooltips hover di mana saja di halaman Anda dengan Divi. Ini adalah cara yang bagus untuk berbagi informasi sampingan dengan pengunjung Anda tanpa langsung menyertakannya di halaman.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Hover Tooltips secara GRATIS

Untuk meletakkan tangan Anda pada tata letak tooltips hover gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Buat Halaman Baru Menggunakan Tata Letak Beranda Dog Walker

Tambahkan Halaman Baru

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru dengan membuka Pages > Add New . Lanjutkan dengan memberi judul pada halaman Anda, memublikasikan halaman, dan beralih ke Visual Builder.

Unggah Halaman Landing Dog Walker

Unggah tata letak halaman arahan ke halaman Anda berikutnya. Meskipun kami akan menggunakan paket tata letak ini untuk melalui teknik tooltips hover, Anda dapat membuat pendekatan ini berlaku pada semua jenis tata letak yang sedang Anda kerjakan.

Buat Desain Hover Tooltips

Tambahkan Baris Baru ke Bawah Bagian

Struktur Kolom (Tentukan Berapa Banyak Tooltip yang Anda Butuhkan)

Setelah Anda mengunggah tata letak halaman arahan, saatnya untuk mulai membuat tooltips hover. Kami akan menambahkannya ke tempat tertentu di halaman tetapi Anda dapat menempatkannya di mana saja menggunakan opsi ubah terjemahan. Temukan bagian berikut di halaman Anda dan tambahkan baris tiga kolom ke bagian bawahnya:

Lebar Maks Baris

Untuk memastikan desain tooltip muncul di tempat yang tepat, kita akan menggunakan lebar maksimum baris yang sama seperti yang digunakan untuk baris di atasnya. Buka pengaturan ukuran baris dan sesuaikan lebar maksimum yang sesuai:

• Lebar Maks: 1280px

Jarak

Untuk mengurangi ruang yang digunakan oleh penampung baris, kita akan menghapus padding atas dan bawah default dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px

Meluap

Kami juga memastikan luapan baris terlihat di tab lanjutan.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Tambahkan Modul Teks Tooltip ke Kolom 1

Tambahkan Konten ke Kotak Konten

Rentang Tanda Tanya

Saatnya mulai membuat desain tooltip pertama! Kami akan menggunakan Modul Teks. Kami akan menambahkan span (untuk ikon tooltip) dan div (untuk konten tooltip) di dalam kotak konten. Ini akan memberi kita lebih banyak kebebasan untuk menata ikon tooltip dan konten tooltip secara individual. Mulailah dengan menambahkan rentang dan menetapkan 'tanda tanya' kelas padanya.

Keterangan Alat Div

Lanjutkan dengan menambahkan div ke kotak konten dengan kelas 'tooltip-content'. Tambahkan konten tooltip pilihan Anda di div ini.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Warna Teks: #ffffff

Pengaturan Teks H3

Ubah juga pengaturan teks H3.

• Judul 3 Font: Amatic SC
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 30px

Perekat

Kami juga bermain-main dengan lebar dan tinggi modul untuk membuat efek hover.

• Lebar: 300px
• Tinggi: 42px

Jarak

Tambahkan beberapa padding atas juga.

• Padding Atas: 10px

Visibilitas Default

Sekarang, dalam status default, kami ingin semua yang ada di bawah ikon tooltip disembunyikan. Itu sebabnya kami akan menyembunyikan luapan di tab lanjutan.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Arahkan Visibilitas

Namun, saat mengarahkan kursor, kami ingin semuanya muncul. Kami akan melakukannya dengan membuat luapan terlihat saat melayang.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Tambahkan Modul Kode Di Bawah Modul Teks

Sekarang setelah kita menata modul, kita masih perlu menata span dan div di dalam kotak konten menggunakan kelas CSS yang telah kita tetapkan. Tambahkan Modul Kode tepat di bawah Modul Teks tooltip.

Tambahkan Kode CSS ke Div Gaya di Modul Teks

Tambahkan baris kode CSS berikut untuk menata bagian-bagian berbeda dari Modul Teks:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

Klon Modul Teks Tooltip Dua Kali & Tempatkan di Kolom Tersisa

Setelah Anda menyelesaikan kolom pertama, Anda dapat mengkloning Modul Teks tooltip dua kali dan menempatkan duplikatnya di dua kolom baris yang tersisa.

Ubah Konten Tooltip

Pastikan Anda mengubah konten tooltip dari setiap duplikat.

Ubah Posisi Tooltip (Menggunakan Transform Translate)

Keterangan alat #1

Last but not least, kita perlu memposisikan ulang tooltips dimanapun kita inginkan pada halaman. Untuk mencapai hasil yang sama persis seperti yang ditunjukkan pada pratinjau posting ini, buka Modul Teks tooltip pertama dan terapkan nilai transformasi terjemahan berikut:

• Kanan: -450px (Desktop), -2000px (Tablet), -1900px (Ponsel)

Keterangan alat #2

Pindah ke modul Teks tooltip di kolom kedua dan ubah nilai transform translate sebagai berikut:

• Kanan: -400px (Desktop), -1300px (Tablet), -1250px (Ponsel)

Keterangan alat #3

Lakukan hal yang sama untuk Modul Teks tooltip di kolom 3 dan selesai!

• Kanan: -500px (Desktop), -600px (Tablet & Ponsel)

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat dan menempatkan tooltips hover di mana saja di halaman Anda tanpa memerlukan plugin tambahan. Ini adalah cara yang bagus untuk menambahkan informasi tambahan tanpa secara langsung memasukkannya ke halaman Anda. Tutorial kasus penggunaan ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung, di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan, pastikan Anda meninggalkan pertanyaan di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.