40 + שימושי Tooltips סקריפטים עם CSS, JavaScript, ו jQuery

אלמנט מעניין UI, tooltips (המכונה גם infotips) לעשות קופסה קטנה להופיע כאשר סמן העכבר מרחף מעל טקסט או תמונה מסוימים עם מידע לגבי האלמנט המרחף מעל. מבחינת חוויית המשתמש, tooltips לספק למשתמשים את המקור המהיר והקל ביותר של מידע מבלי ללחוץ על שום דבר.

למרות שהדרך הפשוטה ביותר להוסיף תיאורי כלים לטקסט שלך היא להשתמש בתג HTML או TITLE =””, ALT =””. עם זאת, יש כמה ממש מגניב עיצובים tooltips וסגנונות ניתן ליצור עם JavaScript ו- CSS באמצעות סקריפטים tooltips. בואו נסתכל.

CSS

Balloon.css - בלון היא ספריית CSS המורכב עם SASS ו LESS כדי להציג הסבר קצר. התוכן ואת המיקום של tooltip הם להגדרה באמצעות נתונים- תכונה. אתה יכול להראות את tooltip בצד שמאל, ימין או שמאל-ימין. אתה יכול אפילו הוסף Emojis לתוכן. Balloon.css ניתן להתקין באמצעות NPM או לטעון אותו CDNJS.

Simptip - עשה עם SASS המאפשר להגדיר מחדש את recompile את הקוד כדי שיתאימו לדרישה שלך. המיקום tooltip ואת התוכן ניתן להגדרה באמצעות שם המחלקה ואת נתונים tooltip תכונה. Simptip זמין כ NPM, חוט, חבילת באואר.

Hint.css - אחת הספריות הפופולריות CSS להציג הסבר קצר, Hint.css נעשה שימוש על ידי אתרים פופולריים רבים כמו Fiverr, Webflow, ו Tridiv. בניגוד לשתי ספריות ה- CSS האחרות, Hint.css משתמש תווית אריה ניתן להגדיר את הגודל והצבע באמצעות שמות הכיתות באמצעות מתודולוגיית BEM. Hint.css זמין ב- NPM, Bower ו- CDNJS.

מיקרוטיפ - עוד ספריית CSS מדהים ליצירת tooltip בנוי “נגישות” בראש, Microtip שימו תווית אריה כדי להחזיק את התוכן tooltip ו נתונים- תכונה כדי להגדיר את גודל tooltip ואת המיקום.

היא משתמשת משתנה CSS המאפשר לך להתאים אישית את tooltip עם פשוט רגיל ol 'קובץ CSS. משתני CSS כבר נתמכים בדפדפני אינטרנט ודפדפנים רבים. Microtip זמין כחבילה NPM, Yarn, ו- UNPkg CDN.

וונק - זה רק 733 בתים. סופר קל משקל שנכתב ב- CSS המודרני המודרני באמצעות CSSNext, LESS, ו- SCSS כך יכול להתאים אישית מחדש את סגנונות כמו שאתה אוהב. Wenk ניתן להוריד מ NPM, חוט, ואת השירותים הבאים חינם CDN: rawgit.com ו unckg.com.

טולטיפי - אחרת קל להיות רק סביב 1 KB בגודל. Tooltippy כולל כמה ערכות נושא מוכנות מראש לעיצוב tooltip. זה כתוב עם CSS מראש מעבדים בשם החרטום. ראה את ההוראה על איך אתה יכול להרחיב או להתאים אישית את הנושאים האלה.

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

טוטיק - לא רק זה ספריית CSS מספק את stylsheet בפורמט CSS, LESS, SasS, הוא גם מספק קל לשימוש GUI כדי להתאים אישית את tooltip. אתה יכול פשוט להעתיק ולהדביק את ה- HTML שנוצר על ידי כלי זה. זה כזה פשוט.

וניל

TippyJS - מופעל על ידי Popper.js, TippyJS מגיע עם שפע של אפשרויות כדי להגדיר את tooltip. אנחנו יכולים להתאים אישית את האנימציות, החץ tooltip, רוחב, גודל, ערכת נושא, ועוד. זה גם מספק פונקציות Callback שבו אתה יכול לבצע פונקציה כאשר tooltip מוצג ומוסתר. תכונות אלה הופכות את TippyJS לאחד מספריות JavaScript החזקות שברשימה שלנו כדי ליצור תיאורי כלים.

Darsain Tooltip - ספריה זו מספקת את היישום הבסיסי של tooltip. עם זאת, הוא מספק אפשרויות מקיפות כדי להגדיר את ההתנהגות טוטיפ, וכן קבוצה של שמות מחלקה כדי לשנות את המראה tooltip. Tooltip עובד היטב בדפדפן ישן כמו IE9, ואם יש צורך, IE8 עם כמה התאמות.

באב - ייתכן ש- Bubb מתאים במיוחד למשתמשי JavaScript מתקדמים. באמצעות שלה API נרחב, מלבד הצגת טקסט פשוט, תוכל להוסיף תוכן HTML מורכב יותר לתיאור הכלי. זה די מגניב; תוכל לעיין ב- Docs בדוגמאות.

פופר - מכיל הפשטה טכנית כדי ליצור משהו כזה “אבא”, כמו טולטיפ, פופבר, ונפילות. TippyJS משתמשת בו כבסיס הספרייה ומשמשת בשמות גדולים באינטרנט כגון Bootstrap, Microsoft ו- Atlassian.

YY הסבר קצר - שלא כמו ספריות אחרות, YY הסבר קצר אינו מחייב להוסיף רכיב HTML או תכונות. הוא פועל באופן מלא עם JavaScript והתוכן, המיקום והצבעים מוגדרים באובייקט במקום באלמנט HTML. זה מושלם כדי לשמש בשילוב עם יישום אינטרנט מלא JavaScript.

Position.js - עוד ספריה מעולה יליד JavaScript כדי ליצור תיאורי כלים, Position.js מספק GUI כדי להגדיר את הפונקציה פשוט להעתיק ולהדביק את הקוד שנוצר שם. Position.js ניתן להשתמש בשילוב עם React.js או Vue.js.

תיאור הכלי - ספריה זו מספקת 14 אפשרויות להציג את tooltip; כגון על ימין, שמאלה, בתחתית, משמאל למרכז, סוף, מרכז תחתון, וכו 'על גבי זה, זה גם חכם מספיק שזה יכול כוונן את מיקום האזמון על בסיס השטח הזמין סביב tooltip. בדוק את ההדגמה.

עכבר - ספריית JavaScrtipt זו תיצור tooltip כי יהיה לנוע לאורך מיקום הסמן. Tooltip מוגדר עם לא סטנדרטי mousetip- במקום להשתמש ב- HTML5 נתונים- תכונה. Mousetip זמין כמודול NPM.

Internetips - די דומה MousetTip, tooltip שנוצר על ידי ספריה זו עוקב אחר מיקום הסמן. הכל מוגדר באמצעות אובייקט JavaScript במקום HTML ו- תכונות נבנות גם עבור דפדפנים מודרניים. זה קל ומהיר.

MTIP - ספריית JavaScript עבור הסבר קצר עם תאימות דפדפן נהדר. זה תואם IE8, להתאמה אישית מלאה דרך אפשרויות, ואתה יכול להוסיף את tooltip לכל רכיב אפילו על img (אלמנט תמונה).

Bubblesee - ספריית JavaScript קל המספק פונקציונליות פשוטה של “הסבר קצר”. זה קל לשימוש ספריית JavaScript ללא אפשרויות מסובכות כדי להתאים אישית את הפלט. קובץ Sass מסופק אם ברצונך לשנות את המראה של תיאור הכלי. בדוק את ההדגמה.

טיפפי - נבנה עם התחביר המודרני של JavaScript, ES6, Tipfy הוא רק 2 KB בגודל. הספרייה מספקת שני גרסאות של קבצים: tipfy.min.js לספק את התסריט עם תחביר ES6 מודרני, ו tipfy.es5.min.js אם אתה צריך תאימות עם דפדפנים ישנים יותר. זה משתמש נתונים- תכונה כדי להתאים אישית את tooltip; ה נתונים- tipfy בצד, לדוגמה, משמש לקביעת כיוון tooltip, ולהשתמש בו נתונים- tipfy- טקסט תכונה כדי להוסיף את תוכן tooltip.

jQuery

טולטיפסטר - ספריה זו מספקת אפשרויות נרחב כדי להתאים אישית כמעט כל דבר כגון נושא, אנימציה, מגע תמיכה, תוכן, ההדק פתוח וקרוב, וכו 'זה גם מספק מאזין האירוע מותאם אישית callbacks המאפשרים למפתחים להרחיב את tooltip עם פונקציות מותאמות אישית. כמו כן, להיות תוסף jQuery, tooltip יעבוד בדפדפן ישן כמו IE6 בהתאם לגרסה jQuery משומש.

פרוטיפ - עוד תוסף jQuery נרחב, פרוטיפ תומך 49 עמדות, HTML עבור תוכן tooltip, תמיכה סמל, שיחות חוזרות מותאמות אישית, והרבה יותר. Protip מספק GUI המאפשר לך להתאים אישית את tooltip בקלות.

פאוורטיפ - תוסף זה jQuery גם מביא אפשרויות APIs המספקים למפתחים מספר דרכים שונות ליישם את tooltips. זה תומך ניווט מקלדת; מה שהופך את קופץ להופיע בעת ניווט אלמנטים עם לשונית מקלדת. PowereTip הוא זמין כמודול NPM. זה יכול לשמש עם RequireJS ו Browserify.

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

טיפים - תוסף פשוט jQuery, אבל זה מביא תכונות ייחודי למדי. ה תוכן tooltip מוגדר עם נתונים tooltip תכונה. מה עוד הוא שאנחנו יכולים גם לעטוף את התוכן עם תווים מיוחדים כדי לעצב את התוכן דומה עיצוב Markdown. אנחנו יכולים להשתמש * כדי להפוך את התוכן מודגש, ~ עבור italic, ו ^ הכותרת.

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

אריה הסבר קצר - הסבר נוסף עם תכונה מובנית נגישות, תוסף זה jQuery הוא תואם WAI-ARIA 1.1. הוא מגיב בצורה שאתה יכול מספקים תצורות שונות עבור גדלי תצוגה שונים. אריה Tooltip זמין כמו מודול NPM בשם t-aria-tooltip.

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

Vuejs

V-tooltip - V-tooltip הוא רכיב Vue.js מופעל על ידי Popper.js מתחת למכסה המנוע. הוא מספק הוראה חדשה בשם v-tooltip אשר ניתן להוסיף אלמנט כלשהו כדי ליצור tooltip. ה v-tooltip עשוי להכיל את תוכן tooltip או את האפשרויות. מלבד המנהג v-tooltip , אתה יכול גם להוסיף את tooltip עם v-popover רכיב. עם רכיב זה, אתה יכול להוסיף תוכן מורכב יותר לתוך tooltip עם רכיב Vue.js או HTML.

הסבר קצר של Vue-Bulma - רכיב Vue.js כדי ליצור הסבר קצר על בסיס ממשק המשתמש של Bulma. ספריה זו היא חלק מרכיב של Vue Bulma. אבל ה הרכיב tooltip זמין כמודול NPM בשם Vue-Bulma-tooltip כי אתה יכול להשתמש בזה רכיבים עצמאיים.

Vue-Directive-Tooltip - בסך הכל זה דומה V-Tooltip רכיב מבוסס על Popper.js ומספק את אותה הוראה בשם v-tooltip. עם זאת, זה לא נראה לספק v-popover רכיב.

וואו-טיפי - ספריה זו עוטפת את Tippy.js לתוך רכיב Vue.js. הוא כולל הוראה מותאמת אישית Vue.js שנקרא v-tippy זה עובד כמו תכונה HTML; אנחנו יכולים להוסיף תוכן tooltip או את האפשרויות כדי להתאים אישית את זה. זה גם הופך רכיב Vue.js מותאם אישית על תוכן tooltip באמצעות HTML אפשרות.

VueJS-Popover - Vue.js מותאם אישית עם הוראה מותאמת אישית בשם v-popover ושני מרכיבים מותאמים אישית כלומר ו מתן גמישות עבור מפתחים להוסיף תיאורי כלים ביישום Vue.js.

רמז - תוסף Vue.js כי עוטפת Hint.css. תוסף תכונות v-hint-css הוראה כדי להוסיף את tooltip. זה מביא את אותה קבוצה של אפשרויות כמו Hint.css, כך שתוכל להוסיף אותם כאובייקט JavaScript או לתבנית Vue.js.

ReactJS

תגיד - רכיב React להצגת קבוצה של תיאורי כלים להדריך משתמשים חדשים כדי להכיר את היישום החדש שלך.

React Floater - ספריה זו עוטפת את Popper.js לתוך רכיב React בשם Floater, ולכן יש לו את אותן תכונות נהדר כמו Floater. אתה יכול להוסיף הסבר קצר וקופץ, ואתה יכול גם לשחק עם רכיב זה דרך ארגז חול זה.

תגובה אוטומטית - רכיב React פשוט עם תכונת המיקום האוטומטי, eact Autotip יהיה להתאים באופן אוטומטי את המיקום של tooltip כאשר השטח הזמין סביבו משתנה.

תגיד את טיפי - בנוי על גבי Tippy.js ו Popover.js. ספריה זו מציגה הסבר קצר רכיב זה אתה יכול לכלול ביישום שלך React.

React רמז - הרכיב React מאריך את Hint.css. הרכיבים מוסיפים מספר תכונות שאינן זמינות ב- Hint.css כגון מיקום אוטומטי, עיכוב ופונקציה Callback.

יותר

גחלת תיאורים - רכיב אמבר.ג'ס ליצירת תיאורי כלים, הוא בנוי על גבי Popper.js. הרכיב מתוכנן גם עם הנגישות בראש ושומר שיפור כדי לעמוד בקנה מידה של 508 בקיאות בנושא זה.

עצה D3 - תוסף D3js. D3.js היא ספריית JavaScript עבור להדמיה נתונים כמו תרשימים, מפות, דיאגרמות, וכו 'תוסף זה מאפשר לך להציג הסבר קצר על גבי נתונים אלה.