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

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 23 من 35.

تلميحات الأدوات (Tooltips) هي عناصر منبثقة صغيرة ومعلوماتية تظهر عندما يقوم المستخدم بتمرير المؤشر فوق عنصر في الواجهة أو التركيز عليه. وهي توفر سياقاً إضافياً دون ازدحام واجهة المستخدم الرئيسية.

لنقم بإنشاء تلميح (tooltip) أساسي باستخدام HTML و CSS:

أولاً، قم بإنشاء هيكل HTML:

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

بعد ذلك، أضف CSS لتحديد موضع تلميح الأدوات (tooltip) وإظهاره/إخفائه:

.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;
}

باستخدام هذا الكود، عندما تمرر مؤشر الماوس فوق الزر، سيظهر تلميح (tooltip) فوقه.

التحدي

سهل

لقد تم تزويدك بزر HTML مع تلميح (tooltip) يظهر عندما يقوم المستخدم بتمرير الماوس فوق زر "Help". مهمتك هي:

إخفاء التلميح بشكل افتراضي.
إضافة لون خلفية ولون نص لجعله بارزاً.
توسيط النص داخل التلميح.
إضافة بعض الحشو (padding) ليبدو التلميح بشكل أفضل.
تدوير الزوايا باستخدام border-radius.

ورقة مرجعية

تلميحات الأدوات (Tooltips) هي عناصر منبثقة صغيرة ومعلوماتية تظهر عند التمرير فوق عناصر الواجهة.

هيكل 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;
}

جرّب بنفسك

<!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>