สร้างฟองคำพูดบนหน้าด้วย Popper.js

ทุกคนรู้เกี่ยวกับ คำแนะนำ และมีแหล่งข้อมูลฟรีมากมายที่จะช่วยคุณสร้างมันขึ้นมา อย่างไรก็ตาม, ฟองข้อความที่กำหนดเอง หรือ “poppers” ยังมีประโยชน์มาก.

พวกเขา ไม่ จำกัด เพียงการโฮเวอร์กิจกรรม, เพื่อให้สามารถปรากฏบนหน้าอย่างสม่ำเสมอและหลีกเลี่ยงพฤติกรรมผู้ใช้อื่น ๆ.

หากคุณต้องการสร้างสิ่งเหล่านี้ poppers ฟองคำพูด บนเว็บไซต์ของคุณแล้ว Popper.js เป็นตัวเลือกที่ดีที่สุด มันเป็นปลั๊กอินโอเพนซอร์สฟรีโฮสต์บนเว็บไซต์ทางการ js.org.

คุณจะพบเคล็ดลับฟองสบู่เหล่านี้ในเว็บไซต์จำนวนมากที่มีส่วนต่อประสานที่ซับซ้อน บางครั้งพวกเขาจะเสนอ เคล็ดลับอย่างรวดเร็ว, เกมส์, และ คำแนะนำออนบอร์ด สำหรับผู้ใช้ใหม่ในอินเทอร์เฟซ.

ด้วย Popper.js คุณไม่จำเป็นต้องรอให้ผู้ใช้เลื่อนเพียงเพื่อสร้างคำแนะนำเครื่องมือ แต่คุณสามารถบังคับให้ตกใจกับ ปรากฏที่ใดก็ได้, ขนาดใดก็ได้, สีใด ๆ, ด้วยการวางตำแหน่งแบบไดนามิก.

ลองดูหน้าตัวอย่าง Popper.js เพื่อดูว่าฉันหมายถึงอะไร มันมาพร้อมกับ คุณสมบัติการวางตำแหน่งที่หลากหลาย ที่ช่วยให้คุณพลิกตำแหน่ง popper โดยอัตโนมัติตามตำแหน่งของหน้าจอ.

ในขณะที่ผู้ใช้เลื่อนหน้าลงพวกเขาอาจสูญเสียฟอง popper ด้วยปลั๊กอินนี้คุณสามารถ บังคับให้มันกลับมาดู โดยพลิกขึ้น (หรือลง) ขึ้นอยู่กับทิศทางการเลื่อนของผู้ใช้.

คุณสามารถควบคุมขอบเขตตำแหน่งลูกศรสีของเคล็ดลับเครื่องมือและอื่น ๆ อีกมากมาย ไม่ต้องพูดถึงปลั๊กอินนี้เป็นรูปหล่อและ ขยายได้อย่างเต็มที่ หากคุณต้องการเพิ่มคุณสมบัติของคุณเองลงในมิกซ์.

ซอร์สโค้ดทั้งหมดมีให้บริการฟรีบน GitHub หากคุณต้องการตรวจสอบ.

ในการเริ่มต้นให้ดูที่ หน้าเอกสาร สำหรับคำแนะนำแบบเต็ม สิ่งนี้จะบอกคุณว่าสคริปต์ใดที่คุณต้องการวิธีตั้งค่า popper ที่กำหนดเองและวิธีกำหนดค่าตัวเลือกวิวพอร์ตที่แตกต่างกัน แม้ว่าทรัพยากรที่ดีที่สุดคือ หน้า Popper.js หลัก, ด้วยการสาธิตมากมายและตัวอย่างรหัสมากมาย.

หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับการพัฒนาลองอ่านโพสต์บล็อกนี้ที่เขียนโดยผู้สร้าง Federico Zivolo.