Tippy.js - ไลบรารีคำแนะนำเครื่องมือวานิลลาที่มีน้ำหนักเบา

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

ในอดีตเราได้พูดถึงสคริปต์คำแนะนำเครื่องมือ แต่นักพัฒนาหลายคนต้องการไลบรารีที่กำหนดเอง บางคนชอบ jQuery บางคนต้องการวานิลลา JS ง่าย ๆ.

ปลั๊กอิน Tippy ทำงานได้ดีที่สุดสำหรับกลุ่มหลัง ผู้ที่ต้องการทำงานกับรหัสวานิลลา JS.

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

ดังนั้นความงามของ Tippy คืออะไร? มันเพิ่มลงในสไตล์ Popper เริ่มต้นเพื่อสร้าง เคล็ดลับเครื่องมือแบบไดนามิกมากขึ้น ด้วยเอฟเฟกต์เหลือเชื่อ.

คุณสามารถเพิ่มเฟดเดอร์สไลด์วิกเกิลระยะเวลาที่กำหนดเองวิธีการโทรกลับและแม้แต่เอฟเฟกต์แบบไดนามิกเช่นคำแนะนำเครื่องมือหมุนอัตโนมัติ.

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

นอกจากนี้ยังรองรับอุปกรณ์ระบบสัมผัสซึ่งทำให้สิ่งนี้เหมาะสำหรับเค้าโครงที่ตอบสนองได้ดี เคล็ดลับเครื่องมือ HTML นั้นมีป้ายกำกับโดยใช้มาตรฐาน ARIA เพื่อความสะดวกในการเข้าถึงสูงสุด ฉันไม่สามารถคิดถึงสิ่งที่ไม่ดีที่จะพูดเกี่ยวกับปลั๊กอินนี้!

หากคุณต้องการลองในเว็บไซต์ของคุณเองเพียงดาวน์โหลดสำเนาซอร์สโค้ดจาก GitHub ซึ่งรวมถึงไฟล์ปลั๊กอินหลักพร้อมรายละเอียดเกี่ยวกับวิธีติดตั้งโดยใช้ npm.

ไฟล์สคริปต์ Tippy.js เริ่มต้นมาพร้อมกับ Popper.js ดังนั้นคุณไม่จำเป็นต้องดาวน์โหลดไลบรารีเพิ่มเติมนั้นอีก สิ่งที่คุณต้องมีก็คือไฟล์ JS / CSS เริ่มต้นและหน้าเว็บเพื่อเรียกใช้คำแนะนำเครื่องมือ.

หากคุณต้องการขุดเพิ่มเติมในตัวอย่างลองดูที่หน้าแรกของ Tippy.js ซึ่งรวมถึงตัวอย่างสด + ตัวอย่างโค้ดคุณสามารถคัดลอกและนำมาใช้ซ้ำ.