สร้างคำแนะนำเครื่องมือแบบย่อใน Pure CSS ด้วย Wenk

ด้วยชื่อแปลก ๆ คุณคงไม่คาดหวังอะไรมากมายนัก Wenk, ฟรี CSS tooltip library. แต่มันเป็น หนึ่งในห้องสมุดที่เล็กที่สุด คุณสามารถวัดได้ต่ำกว่า 1KB เมื่อ gzipped.

Wenk ใช้ CSS บริสุทธิ์ด้วย ข้อมูล-* แอตทริบิวต์ เพื่อสร้าง เคล็ดลับเครื่องมือสด ที่คุณสามารถ restyle และตำแหน่งที่คุณชอบ เหนือสิ่งอื่นใดมันเป็นห้องสมุดที่ไม่มีค่าใช้จ่ายพร้อมซอร์สโค้ดที่มีอยู่ใน GitHub.

เคล็ดลับเครื่องมือที่มีน้ำหนักเบาเหล่านี้ง่ายมากที่จะเพิ่มไปยังเว็บไซต์ของคุณ คุณแค่ต้องการ Wenk.css ไฟล์ เพิ่มไว้ในส่วนหัวของหน้า, ซึ่งคุณสามารถดาวน์โหลดได้จาก repo GitHub.

หรือคุณสามารถทำได้ เพิ่มไฟล์ CDN ซึ่งโฮสต์บน CDN ของ GitHub นี่คือรหัสสำหรับ:

หรือถ้าคุณเป็นแฟนตัวยงของคุณที่สามารถติดตั้งแพ็คเกจนี้ได้ จากสถานี.

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

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

นี่คือตัวอย่างของบางส่วน รหัสเริ่มต้น สำหรับคำแนะนำเครื่องมือ Wenk:

   หญิงสาวไปทางขวา!  

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

สิ่งสำคัญที่ต้องพิจารณาคือ การสนับสนุนเบราว์เซอร์. Chrome และ Firefox ทุกรุ่น ควรทำงานได้ดี. เหมือนกันกับ Opera 12+ และ Opera Mini v8 + แต่ดูเหมือนว่า IE8 และ IE10 จะเป็นเช่นนั้น มีปัญหา การแสดงคำแนะนำเครื่องมือเหล่านี้ โชคดีที่ส่วนแบ่งการตลาดของพวกเขาลดลงอย่างรวดเร็ว แต่เป็นสิ่งที่ควรพิจารณาก่อนใช้งาน.

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

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