Microtip - CSS Tooltip Library ที่มีคุณสมบัติการเข้าถึงดั้งเดิม

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

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

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

ในหน้าแรกคุณจะพบลิงค์ดาวน์โหลดไปยังห้องสมุด Microtip พร้อมด้วยรหัสตัวอย่าง.

คุณสามารถรับการตั้งค่านี้ผ่านผู้จัดการแพคเกจดาวน์โหลดโดยตรงหรือดึงโดยตรงจาก CDN มัน มาพร้อมกับไฟล์ CSS หนึ่งไฟล์ และนั่นคือทั้งหมดที่คุณต้องการ.

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

นี่คือตัวอย่างรหัสคำแนะนำเครื่องมือที่แนบมากับองค์ประกอบปุ่มที่มีตำแหน่งที่กำหนดเอง:

รหัสไม่ถูกต้องมากนัก?

ไลบรารี่นี้มีน้ำหนักเบาสุด ๆ โดยมีขนาดรวมทั้งหมด 1KB มันบ้ามากเมื่อพิจารณาว่าคุณได้รับเคล็ดลับเครื่องมือเหล่านี้มากแค่ไหน.

คุณสมบัติ CSS ที่กำหนดเองสามารถส่งผ่านคุณลักษณะ HTML เพื่อกำหนดขนาดตัวอักษรสไตล์การเปลี่ยนแปลงการทำให้สบายและการตั้งค่าอื่น ๆ มากมาย.

นอกจากนี้คุณยังสามารถ เขียนทับ CSS โดยตรงเพื่อทำให้คำแนะนำเครื่องมือมีขนาดใหญ่ขึ้น ด้วยสีหรือแบบอักษรที่แตกต่างกัน.

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

Microtip นั้นยอดเยี่ยมมาก ง่ายต่อการติดตั้งและปรับแต่ง ดังนั้นถ้าอย่างน้อยคุณก็รู้รหัสส่วนหน้าพื้นฐานที่คุณจะดี.

แต่ดูที่ GitHub repo เพื่อดูข้อมูลการตั้งค่าเพิ่มเติม & เพื่อคว้าสำเนาของสไตล์ชีท.

หากคุณมีคำถามหรือข้อเสนอแนะสำหรับคุณสมบัติใหม่คุณสามารถส่งสายไปยังผู้สร้างบน Twitter @_ighosh.