בניית טולטיפ – tooltip – הדרך הפשוטה באמצעות CSS

בפוסט הזה ננסה לכסות את נושא בניית טולטיפים מסוגים שונים. טולטיפ הוא כמו פופאפ קטן, שנפתח במקום מוגדר בעמוד, ובדרך כלל נותן מידע או כפתורים קטנים לביצוע פעולות מוגדרות. לדוגמה – בטפסים ליד שדות שמשמעותם לא בהכרח ברורה למשתמש, כמו טפסים באתרים של בנקים וכדו', הרבה פעמים יש ליד השדה אייקון של סימן שאלה, ובמעבר עכבר או לחיצה עליו – נפתח לידו הסבר קצר. הרבה פעמים משתמשים בפלאגינים כדי לייצר את בועות ההסבר הללו וחבל, כי זה עוד סקריפטים וCSSים מיותרים, הגדרות שלא תמיד עובדות עם עברית, קוד שבדרך כלל אינו נגיש ומבנה HTML שאינו בהכרח תקין. בקיצור – אם אפשר לבד וממש בקלי קלות – למה ללכת לפלאגינים?!

בפוסט הזה נדבר על שתי סוגים של טולטיפים:

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

יצירת טולטיפ – בועית – המכילים טקסט בלבד באמצעות before

נניח שיש לנו אייקון של ? שפותח בועית הסבר. נגדיר לאייקון בHTML אלמנט מסוג a או button, כי הוא אמור להיות באינטראקציה עם הגולש. מבחינת העיצוב הכי קל לשים a ולא לשכוח לתת לו href כלשהו (לדוגמה javascript: void(0) וכן role="button" עבור קוראי מסך, כי תכל'ס הוא כפתור ולא קישור. כעת נוסיף לו מאפיין נוסף, שבדרך כלל משמש עבור קוראי מסך, והפעם נשתמש בו לצורך יצירת הטולטיפ. המאפיין נקרא  aria-label.

המאפיין aria-label משמש את קוראי המסך בצורה דומה למאפיין title. הוא מגדיר לאלמנט מה הכותרת שלו, מה הוא. נותנים את זה לדוגמה לקישורים שאין בתוכם טקסטים, וכותבים את מהות הקישור (לחץ כדי לקרוא עוד על חתולי סיאם) או כשהכיתוב של הקישור לא מספיק ברור (בקישור כתוב "קרא עוד" והtitle אומר "קרא עוד על הפרטיזנים במלחמת העולם השניה"), כנ"ל לגבי תמונות המכילות טקסט בתוכן, ועוד.

ההבדל בין title לבין aria-label, לפחות מבחינתנו עכשיו, הוא שכשיש לאלמנט title, אם נעמוד עליו עם העכבר – נראה את הכיתוב בתוך בועית קטנה ולא מי יודע מה יפה. משהו דיפולטיבי של הדפדפן שבו אתם גולשים. לעומת זאת לaria-label, כמו כל המאפיינים ממשפחת aria – אין כל השפעה ויזואלית.

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

אם כן – כך נראה הHTML שלנו:

כעת ניגש לCSS ואני לא מדברת על עיצוב של הכפתור עצמו, את זה תעשו בהתאם לעיצוב שלכם (לא לשכוח לתת מעבר עכבר), אלא לבועית עצמה.

נוסיף אלמנט פיקטיבי, before, לכפתור שלנו (קראו עוד על before), ודבר ראשון נגדיר לו כמובן את הcontent – התוכן שהוא מכיל. כזכור אנחנו רוצים שהתוכן שלו יהיה התוכן של המאפיין aria-label.

content: attr(aria-label);

נמשיך להגדרת המיקום שלו – בדרך כלל נרצה שהוא לא יתפוס מקום, כך שכשהוא נפתח ונסגר לא יפיל את כל התוכן שאחריו. ניתן לכפתור עצמו position: relative ולbefore ניתן position: absolute. עוד על ההגדרה position כאן.

נמשיך למיקום עצמו – אם רוצים שיהיה מעל הכפתור – נותנים bottom: 100%, אם רוצים שיעמוד משמאל לכפתור – right: 100% וכן על זו הדרך. תמיד נותנים 100% מהכיוון הנגדי. ניתן להוסיף דיוק נוסף למיקום באמצעות margin לכל כיוון שהוא.

נוסיף גודל במידת הצורך, מסגרת, רקע, פונט וצבעים. והנה הטולטיפ הנפלא שלנו עומד לו. שימו לב שהוא כל הזמן פתוח עכשיו, וזה לא מה שאנחנו צריכים. לכן נגדיר לו בנוסף לכל – opacity: 0; visibility: hidden; ואם רוצים שכשהוא נפתח הוא יעלה או ירד טיפה – נוסיף גם margin-top: 15px; בדרך כלל אני משתמשת בtransform על מנת לבצע את ההורדה הזו, אבל כאן transform עשוי לשמש אתכם עבור היישור (פסקה הבאה).

אם אתם רוצים שהבועית תעמוד ממורכזת ביחס לכפתור – תוכלו לקרוא כאן איך לעשות את זה

עכשיו לא רואים את הבועית שלנו, וזה הזמן להציג אותה. אם רוצים שהיא תוצג במעבר עכבר – נשתמש ב:hover, ואם רוצים שהיא תוצג בלחיצה – :focus. האמת שבכל מקרה הייתי משתמשת ב:focus, ואם צריכים מעבר עכבר – הייתי מוסיפה גם:hover, וזה על מנת שבניווט מקלדת, כשמפקסים את הכפתור – הבועית תוצג

בכל מקרה, במצב שבחרתם, יש להגדיר כך:

.more_info:focus:before{
   opacity: 1;
   visibility: hidden;
}

רוצים שייפתח עם fade ולא בבום – לכן נוסיף למצב הסגור:

transition: opacity .25s, visibility 0s .25s;

ובמצב הפתוח (פוקוס, מעבר עכבר):

transition-delay: 0s;

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

יצירת טולטיפ – בועית – עם תוכן עשיר באמצעות CSS בלבד

נתחיל בבסיס. ניצור קודם כל איזשהו אלמנט שיכיל לנו את הכפתור ואת הבועה וניתן לו הגדרת position: relative; בתוכו ניצור את האלמנט שעליו לוחצים, כאמור תגית a או button, ומיד אחרי האלמנט הזה ניצור את האלמנט שמכיל את הבועית שלנו, נכניס את התוכן פנימה ונוסיף CSS לעיצוב. לאחר שסיימנו לעצב את הבועית שלנו, נוסיף לה את ההסתרה – opacity: 0; visibility: hidden; וכן הגדרת transition כמו שהוסבר למעלה.

כעת נוסיף את הגדרות הCSS עבור המצב הפתוח. אני כאן מתייחסת לפוקוס – מה שיגרום לזה שהבועה תפתח בלחיצה על הכפתור, אבל את אותה הגדרה אפשר לממש גם במעבר עכבר, להחליף את הfocus בhover.

אנחנו רוצים לומר שבפוקוס על אלמנט מסוים, האלמנט שמיד אחריו יקבל CSSים מסויימים. בשביל זה נחזור לפוסט שעסק בCSS על אלמנטים אחים והכל נורא פשוט.

אנחנו נותנים קודם כל את הסלקטור CSS על הכפתור, שזה בעצם button:focus, ומוסיפים + ואחריו את הID או הקלאס של האלמנט שהוא הבועית. התוצאה אמורה להיות משהו בסגנון:

button:focus + div{}

עבור הסלקטור הזה נגדיר את הCSSים שלנו למצב שהטולטיפ פתוח, לא לשכוח את הtransition-delay, וסיימנו 🙂 הנה התוצאה:

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

שימו לב, אם אתם צריכים שהבועה תהיה פתוחה במעבר עכבר – כדאי להגדיר שהיא פתוחה גם במעבר עכבר על הכפתר וגם על הבועה עצמה, כדי שהיא לא תיסגר כשהגולש עובר מהכפתור אליה.

הנגשת טולטיפ עם לינקים לניווט מקלדת – הוספת JS

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

כדי לדעת איזה אירוע לתת בסקריפט, נעבור על הסיטואציה צעד צעד. כאמור מדובר רק בניווט מקלדת. אז הגולש הגיע עם פוקוס לכפתור, וכעת הבועית פתוחה. מצב מצוין. כעת הוא יכול ללחוץ טאב – ואז הוא צריך לעבור לקישורים או הכפתורים שבתוך הבועית. כלומר, טכנית הוא עובר אליהם, הפוקוס עליהם, אבל הגולש לא רואה אותם כי הכפתור כבר אינו בפוקוס. לכן האירוע שאלכוד יהיה אירוע לחיצת מקלדת – keydown על הכפתור. בפונקציה שלנו נשאל האם לחצו על טאב (בהתאם לkeyCode) ואם כן – נוסיף לכפתור את הקלאס. אם לא – נוריד מהכפתור את הקלאס.

נמשיך בתסריט שלנו. כעת הבועה פתוחה, בגלל הקלאס, והגולש מנווט בין הקישורים/כפתורים שבבועית, והנה הוא יוצא החוצה מהכפתור האחרון, וכעת בעצם צריך לסגור את הבועית שלנו. לכן נוסיף אירוע לחיצה נוסיף, על הכפתורים בבועית, ובפונקציה נשאל, אם האלמנט הזה הינו האחרון בבועית. אם כן, ולחצו על טאב ללא shift (כי shift + tab משמעו הליכה אחורנית ואז בעצם עוד לא יצאו מהבועית שלנו), במצב הזה נוריד את הקלאס מהכפתור שלנו, והבועית תסגר.

עד כאן לבינתיים. בהצלחה רבה!