מדריך ליצירת Tooltips בעזרת CSS בלבד

מה זה Tooltip ולמה צריך אותו

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

ברחבי הרשת תוכלו למצוא הרבה מאוד דוגמאות ליצירת Tooltips משלכם, רובם מבוססי JavaScript או jQuery. במדריך זה אראה כיצד ליצור Tooltip המבוסס כולו על טהרת ה - CSS.

תמונה ובה דוגמה ל - Tooltip

Demo of a Tooltip in action


יצירת Tooltip בעזרת HTML בלבד וללא CSS

אני יודע שהבטחתי שאלמד במדריך זה כיצד ליצור ולעצב Tooltips בעזרת CSS, אך לפני שנמשיך בנושא זה חשוב שתדעו שניתן ליצור Tooltips בעזרת HTML בלבד. נעשה זאת על ידי ניצול העובדה שכל הדפדפנים המובילים תומכים בהצגת Tooltips באופן טבעי וללא התערבות שלנו כמפתחים. כדי לגרום לדפדפן להציג Tooltip כל מה שיהיה עלינו לעשות הוא להשתמש בתכונה (Attribute) הקיימת בכל האלמנטים בשפת HTML והיא title.

בדוגמת הקוד הבאה נוסיף Tooltip לאלמנט מסוג תמונה:

<img src="image.jpg" title="This is a Tooltip" alt="Tooltip demo" />

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

יצירת Tooltip בעזרת HTML ו - CSS בלבד

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

כדי ליצור את ה - Tooltip שלנו נשתמש באלמנט מסוג <a>. בחרנו לממש את ה - Tooltip דווקא באמצעות אלמנט זה בגלל התמיכה של כל הדפדפנים בפסאודו אלמנט hover עבור אלמנט מסוג זה. קוד ה - HTML שלנו ייראה כך:

<a class="info" href="#">tooltip <span> This is a Tooltip </span></a>

כפי שביכולתכם לראות בדוגמה האלמנט <a> הינו חבר במחלקה "info" . כעת ניצור את המחלקה  הזו בעזרת קוד CSS ונוסיף למחלקה זו את הקוד הנדרש כדי ליצור Tooltip. קוד ה - CSS שלנו ייראה כך:

/* נגדיר כיצד ייראה האלמנט שלנו כאשר לא עומדים מעליו עם סמן העכבר  */
a.info{
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}


/* כעת נגדיר כיצד ייראה האלמנט שלנו כאשר עומדים מעליו עם סמן העכבר */
a.info:hover{z-index:25; background-color:#ff0}


/* נסתיר את האלמנט ספאנ המכיל את הטקסט עבור הטולטיפ  */
a.info span{display: none}

/* זהו הקוד המאפשר את הצגת הטולטיפ כאשר עומדים עם סמן העכבר מעל האלמנט שלנו  */
a.info:hover span{
display:block;r /> position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}

   

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

 

כלים ומאמרים נוספים בנושא

מדריך לקישורים ב - HTML

מדריך לאלמנט <span> ב - HTML

מדריך למחלקות ב - CSS

מדריך לשכבות (z-index) ב - CSS

מדריך לפסאודו מחלקות ב - CSS


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש