- וניל Javascript Tooltip הספרייה

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

בעבר, כיסינו סקריפטים tooltip אבל מפתחים רבים רוצים ספריות מותאמות אישית. יש מעדיפים jQuery, אחרים רוצים פשוט וניל JS.

תוסף Tippy עובד הכי טוב עבור הקבוצה השנייה שרוצים לעבוד עם קוד JS וניל.

עם Tippy.js אתה מקבל ספריית tooltip במלואה פועל על גבי Popper.js. משמעות הדבר היא תוסף מגיע עם תלות קטנה, אבל זה הרבה יותר קל לנהל מאשר הספרייה jQuery.

אז מה היופי של טיפי? זה מוסיף על ברירת המחדל של סגנונות Popper ליצור תיאורי כלים נוספים דינמיים עם אפקטים מדהימים.

אתה יכול להוסיף fades, שקופיות, wiggles, משכים מותאמים אישית, שיטות התקשרות, ואפילו אפקטים דינמיים כמו סיבוב אוטומטי tooltips.

באמת תוסף זה ייקח tooltips שלך עד רמה חדשה לגמרי עם תכונות שימושיות מוגדרת היטב. אתה יכול לשמור tooltips קבוע למסך עם אלמנטים בדף מסוים, או שיש להם לשנות כיוון אם המסך מקבל קטן מדי.

הוא תומך גם התקני מגע אשר עושה את זה מושלם עבור פריסות תגובה. תיאור הכלי HTML מסומן באמצעות תקני ARIA לצורך נגישות מקסימלית. אני לא יכול לחשוב על משהו רע להגיד על זה plugin!

אם אתה רוצה לנסות את זה באתר שלך פשוט להוריד עותק של קוד המקור של GitHub. זה כולל את הקבצים העיקריים plugin יחד עם פרטים על איך להתקין את זה באמצעות npm.

ברירת המחדל Tippy.js קובץ script מגיע עם Popper.js כללה אז אתה אפילו לא צריך להוריד את זה ספריה נוספת. כל מה שאתה צריך זה ברירת המחדל של JS / CSS קובץ ודף אינטרנט כדי להפעיל tooltips.

אם אתה רוצה לחפור עוד כמה דוגמאות תסתכל על דף הבית של Tippy.js הכולל דוגמאות חיות + קטעי קוד אתה יכול להעתיק ולעשות שימוש חוזר.