Positioning Tooltips

في الوضع الافتراضي يظهر ال Tooltip من اعلي ال Element يمكنك تغيير وضعية اظهار ال Tooltips من اي اتجاه باستخدام ال data-placement attribute ونكتب بداخل ال value اي من القيم التالية top, bottom, left, right

تقوم بأظهار تلميح عندما يقوم المستخدم بتحريك الماوس علي احد العناصر

HTML

<a href="#" data-toggle="tooltip" data-placement="top" title="closetag.com">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="closetag.com">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="closetag.com">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="closetag.com">Hover</a>

جرّب بنفسك

Example

HTML

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

جرّب بنفسك

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

CSS: تستخدم tooltip ال class التالي position: relative ، وهو أمر ضروري لوضع نص تلميح tooltip (position: مطلق).

ملاحظة: نص ال Tooltip يكون مخفي افتراضيًا ، وسيكون مرئيًا عند تمرير المؤشر فوقه. لقد أضفنا أيضًا بعض الأنماط الأساسية إليها: عرض 120 بكسل ، ولون خلفية اسود، ولون نص أبيض ، ونص متوسط ، و padding علوي وسفلي 5 بكسل.

تُستخدم خاصية CSS border-radius لإضافة زوايا مستديرة إلى نص تلميح tooltip . يتم استخدام hover: لإظهار نص تلميح tooltip عندما يحرك المستخدم الماوس فوق <div> مع class = "tooltip".

شرح صفوف ومحتوى الفقرة

Example

جميع فقرات هذا الدرس (Bootstrap 4 Tooltip)