Tutorial Yayasan balon Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
posisi tampilan balon,balon putaran,
Yayasan balon
Balon menggerakkan mouse di atas elemen setelah pertunjukan:
Kita dapat menambahkan setiap elemen dalam data-tooltip properti untuk membuat pesan. Gunakan title atribut untuk mengatur kiat pesan teks.
Catatan: slider membutuhkan JavaScript. Jadi, Anda perlu menginisialisasi oundation JS:
contoh
<Span judul Data-tooltip = " Hore!"> Arahkan kursor saya! </ Span>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba » .has-tip kelas dapat memindahkan mouse teks tebal:
contoh
<Span kelas data-tooltip = " memiliki-tip" title = "Hore!"> Arahkan kursor saya! </ Span>
Coba »
posisi tampilan balon
Secara default, kotak prompt akan muncul di bagian bawah dari elemen.
Anda dapat menggunakan .tip-top , .tip-left , .tip-right atau .tip-bottom (default) untuk mengatur posisi kotak prompt.
Catatan: Pada ukuran layar kecil, balon broadband adalah 100%.
contoh
<Span kelas data-tooltip = " memiliki-tip tip-top" title = "Hore!"> Top </ span>
<Span kelas data-tooltip = " memiliki-tip tip-bottom" title = "Hore!"> Bawah </ span>
<Span Data-tooltip class = " memiliki-tip tip-kiri" title = "Hore!"> Kiri </ span>
<Span kelas data-tooltip = " memiliki-tip tip-benar" title = "Hore!"> Kanan </ span>
Coba »
balon putaran
.radius dan .round kelas digunakan untuk mengatur kotak kiat bulat:
contoh
<Span kelas data-tooltip = " memiliki-tip" title = "Hore!"> Default </ span>
<Span kelas data-tooltip = " memiliki-tip radius" title = "Hore!"> Radius </ span>
<Span Data-tooltip class = " memiliki-ujung bulat" title = "Hore!"> Putaran </ span>
Coba »