تلميحات الأدوات

جزء من قسم الواجهة الأمامية العملية في رحلة 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>