57- نصائح الأدوات المتحركة (CSS Tooltips)

إنشاء نصائح الأدوات باستخدام CSS.

عرض توضيحي: أمثلة على نصائح الأدوات

غالبًا ما تُستخدم نصيحة الأدوات لتحديد معلومات إضافية حول شيء ما عندما يحرك المستخدم مؤشر الماوس فوق عنصر:

أعلى يمين أسفل يسار

نصيحة أداة أساسية

إنشاء نصيحة أداة تظهر عند تحريك المستخدم للماوس فوق عنصر:

مثال:

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

** شرح المثال**

HTML:

• استخدم عنصر حاوية (مثل <div>) وأضف إليه فئة "tooltip".
• عندما يحرك المستخدم الماوس فوق هذا العنصر <div>، سيظهر نص نصيحة الأداة.
• يوضع نص نصيحة الأداة داخل عنصر مضمن (مثل <span>) مع فئة "tooltiptext".

CSS:

• تستخدم فئة tooltip الخاصية position:relative، وهي ضرورية لموضع نص نصيحة الأداة ( position:absolute ). ملاحظة: انظر الأمثلة أدناه حول كيفية وضع نص نصيحة الأداة.
• تحتوي فئة tooltiptext على نص نصيحة الأداة الفعلي. يتم إخفاؤها بشكل افتراضي، وستكون مرئية عند التمرير (انظر أدناه). لقد أضفنا أيضًا بعض الأنماط الأساسية إليها: عرض 120 بكسل، ولون خلفية أسود، ولون نص أبيض، ومحاذاة نصية إلى الوسط، وتعويض 5 بكسل لأعلى ولأسفل.
• تُستخدم خاصية CSS border-radius لإضافة زوايا مستديرة إلى نص نصيحة الأداة.
• يُستخدم المحدد :hover لإظهار نص نصيحة الأداة عندما يحرك المستخدم الماوس فوق العنصر <div> مع فئة "tooltip".

وضع نصائح الأدوات (Positioning Tooltips)

في هذا المثال، يتم وضع نصيحة الأداة إلى يمين (left:105%) النص الذي يمكن تحريكه فوقه (<div>). لاحظ أيضًا أنه يتم استخدام top:-5px لوضعه في منتصف عنصر الحاوية الخاص به. نستخدم الرقم 5 لأنه يحتوي نص نصيحة الأداة على تعويض علوي وسفلي قدره 5 بكسل. إذا قمت بزيادة تعويضه، فقم أيضًا بزيادة قيمة الخاصية top للتأكد من بقائه في المنتصف (إذا كان هذا شيئًا تريده). ينطبق الشيء نفسه إذا كنت تريد وضع نصيحة الأداة إلى اليسار.

أداة نصيحة يمين

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

إذا كنت تريد ظهور نصيحة الأداة في الأعلى أو الأسفل، فانظر إلى الأمثلة أدناه. لاحظ أننا نستخدم الخاصية margin-left بقيمة ناقص 60 بكسل. وذلك لمحاذاة نصيحة الأداة فوق/أسفل النص الذي يمكن تحريكه فوقه. يتم ضبطها على نصف عرض نصيحة الأداة (120/2 = 60).

أداة نصيحة علوي

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

أداة نصيحة أسفل

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

سهام نصيحة الأداة (Tooltip Arrows)

لإنشاء سهم يظهر من جانب معين من نصيحة الأداة، أضف محتوى “فارغًا” بعد نصيحة الأداة، مع فئة العنصر الزائف ::after إلى جانب الخاصية content. يتم إنشاء السهم نفسه باستخدام الحدود. سيؤدي هذا إلى جعل نصيحة الأداة تبدو σαν فقاعة كلام.

يوضح هذا المثال كيفية إضافة سهم إلى أسفل نصيحة الأداة:

سهم أسفل

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

شرح المثال

• وضع السهم داخل نصيحة الأداة: الخاصية top: 100% ستضع السهم أسفل نصيحة الأداة. الخاصية left: 50% ستحاذي السهم إلى الوسط.
• ملاحظة: تحدد الخاصية border-width حجم السهم. إذا قمت بتغيير هذا، قم أيضًا بتغيير قيمة margin-left إلى القيمة نفسها. سيؤدي هذا إلى إبقاء السهم في المنتصف.
• تُستخدم الخاصية border-color لتحويل المحتوى إلى سهم. لقد قمنا بتعيين الحد العلوي إلى الأسود، وباقي الجوانب إلى شفاف. إذا كانت جميع الجوانب سوداء، فستحصل على مربع أسود.

يوضح هذا المثال كيفية إضافة سهم إلى أعلى نصيحة الأداة. لاحظ أننا قمنا بتعيين لون الحد السفلي هذه المرة:

سهم أعلى

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

يوضح هذا المثال كيفية إضافة سهم إلى يسار نصيحة الأداة:

سهم يسار

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

يوضح هذا المثال كيفية إضافة سهم إلى يمين نصيحة الأداة:

سهم يمين

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

ظهور تدريجي لنصائح الأدوات (التحريك)

إذا كنت تريد ظهور نص نصيحة الأداة تدريجيًا عندما يكون على وشك الظهور، يمكنك استخدام خاصية CSS transition إلى جانب الخاصية opacity ، والانتقال من عدم الرؤية تمامًا إلى 100% قابل للرؤية، في غضون عدد من الثواني المحددة (ثانية واحدة في مثالنا):

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}