הסברים קופצים

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 23 מתוך 35.

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

בואו ניצור תיאור כלי בסיסי באמצעות HTML ו-CSS:

ראשית, ניצור את מבנה ה-HTML:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

לאחר מכן, הוסף את ה-CSS כדי למקם את הרמז ולהציג או להסתיר אותו:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* מקם את חלונית המידע */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* הוסף השהיה קצרה לפני ההצגה */
  opacity: 0;
  transition: opacity 0.3s;
}

/* הצג את חלונית המידע כאשר העכבר מרחף מעל הרכיב המכיל */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

עם הקוד הזה, כשתרחף מעל הכפתור, יופיע מעליו תיאור קצר.

אתגר

קל

ניתן לך כפתור HTML עם חלונית מידע שמופיעה כשהמשתמש מרחף מעל הכפתור "Help". המשימה שלך:

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

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>