Buat Gelembung Ucapan Dalam Talian dengan Popper.js

Semua orang tahu petua alat dan terdapat puluhan sumber percuma untuk membantu anda membuatnya. Walau bagaimanapun, buih mesej peribadi atau “poppers” juga sangat berguna.

Mereka tidak terhad kepada peristiwa hover, jadi mereka boleh muncul di halaman secara konsisten dan bekerja di sekitar tingkah laku pengguna yang lain.

Jika anda ingin mencipta ini ucapan gelembung ucapan di laman anda kemudian Popper.js adalah pilihan terbaik. Ia adalah plugin sumber terbuka percuma, yang dihoskan di laman web rasmi js.org.

Anda akan menemui petua gelembung ini di banyak laman web yang mempunyai antara muka yang kompleks. Kadang-kadang mereka akan menawarkan petua cepat, pelayaran, dan nasihat onboarding untuk orang baru ke antara muka.

Dengan Popper.js, anda tidak perlu menunggu pengguna hover hanya untuk membuat tooltip. Sebaliknya, anda boleh memaksa seorang popper muncul di mana sahaja, sebarang saiz, apa warna, dengan kedudukan dinamik.

Lihat halaman demo Popper.js untuk melihat apa yang saya maksudkan. Ia datang dengan a pelbagai ciri kedudukan yang membolehkan anda auto-flip kedudukan popper berdasarkan lokasi skrin.

Apabila pengguna menatal ke bawah halaman, mereka mungkin kehilangan gelembung popper. Dengan plugin ini, anda boleh memaksa ia kembali ke paparan dengan membalikkannya (atau ke bawah), bergantung kepada arah tatal pengguna.

Anda mempunyai kawalan penuh ke atas sempadan, kedudukan anak panah, warna petua alat, dan banyak lagi. Belum lagi plugin ini cantik dan sepenuhnya extensible jika anda ingin menambah ciri anda sendiri ke dalam campuran.

Semua kod sumber boleh didapati secara percuma di GitHub jika anda mahu menyemaknya.

Untuk bermula, lihatlah halaman dokumentasi untuk panduan penuh. Ini memberitahu anda skrip mana yang anda perlukan, bagaimana untuk membuat popper tersuai, dan cara mengkonfigurasi pilihan viewport yang berbeza. Walaupun, sumber terbaik ialah halaman Popper.js utama, dengan banyak demo dan banyak contoh kod.

Sekiranya anda ingin membaca lebih lanjut tentang pembangunan, lihat tulisan blog ini yang ditulis oleh pencipta Federico Zivolo.