יצירת כלים ממוזערים ב CSS טהור עם Wenk

עם שם כל כך מוזר, אתה לא מצפה הרבה מן וונק, חופשי CSS Tooltip הספרייה. אבל זה אחת הספריות הקטנות ביותר אתה יכול לקבל מדידה תחת 1KB כאשר gzipped.

Wenk משתמש CSS טהור עם נתונים-* תכונות ליצור ובטיפים חיים כי אתה יכול restyle ומיקום לטעמך. החשוב מכל, היא ספריה חופשית לחלוטין עם קוד המקור זמין על GitHub.

אלה tooltips קל הם פשוט סופר להוסיף לאתר האינטרנט שלך. אתה פשוט צריך את Wenk.css קובץ נוסף לכותרת הדף שלך, אשר ניתן להוריד מן ריפו GitHub.

או, אתה יכול אפילו הוסף את קובץ ה- CDN אשר מתארח על CDN של GitHub. הנה הקוד עבור זה:

לחלופין, אם אתה אוהד npm / bower אתה יכול להתקין את החבילה מן הטרמינל.

לתגלי tooltip המוגדרים כברירת מחדל אין נתונים מותאמים אישית רבים. הם נותנים לך בחר את המיקום ואת רוחב, אבל אתה חייב לשנות ידנית את CSS אם אתה רוצה אותם מנוסח אחרת.

לדוגמה, ייתכן שתרצה להוסיף חץ CSS לסרגל הכלים שמופיע מעל אלמנט tooltip. זה די פשוט ליצור אבל תצטרך לסרוק את סגנונות Wenk ל מצא את המחלקה המדויקת CSS להרחיב.

הנה דוגמה של כמה קוד ברירת המחדל עבור תיאורי כלים של Wenk:

   וונק ימינה!  

דף הנחיתה הראשי של Wenk כולל הדגמות חיות כי אתה יכול לבדוק על ידי מרחף. אלו הם את tooltips הבסיסיים ביותר תקבל אבל הם מושלמים עבור ספרייה שמשקלה פחות מקילומטר.

דבר אחד גדול הוא לשקול תמיכה בדפדפן. כל הגירסאות של Chrome ושל Firefox צריך לעבוד בסדר. אותו הדבר עם אופרה 12 + ו- Opera Mini v8 +. אבל IE8 ו IE10 נראה יש בעיה עיבוד אלה tooltips. למרבה המזל, נתח השוק שלהם יורד במהירות אבל זה משהו לשקול לפני השימוש.

אני עדיין מופתע כמה אתה יכול לעשות עם כל כך מעט KBs. ספריית Wenk היא עדות להתפתחות Frontend המודרנית וזה מראה כי קצת יכול ללכת דרך ארוכה.

אתה יכול לחפור דרך כל המקור על גייתוב, יחד עם הדגמות חיות ו קטעי קוד כדי להגדיר & ליצור אלה tooltips עבור האתר שלך.