انتقل إلى محتوى الدرس

Tooltip Placement Directions اتجاهات تموضع التلميحات الأربعة

أتقن تلميحات Bootstrap 5.3 بدءاً من التفعيل الاختياري بجافاسكريبت القياسية واتجاهات التموضع الأربعة وتخصيص متغيرات CSS وصولاً لتغليف العناصر المعطلة والحماية المدمجة من XSS.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

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

الصف 1 شرح توضيحي

يدعم التلميح أربعة اتجاهات تموضع قياسية تُحدَّد عبر السمة data-bs-placement بقيم: top (الافتراضي)، وbottom، وright، وleft. وبفضل محرك Popper، ينقلب التلميح تلقائياً للاتجاه المقابل إذا اقترب الزر من حافة نافذة العرض بحيث لا يُقتطع النص خارج الشاشة.

عندما تضع زر التلميح داخل مجموعة أزرار .btn-group أو مجموعة حقول .input-group، تأكد من إلحاق التلميح بجسم المستند عبر data-bs-container="body" لتفادي كسر زوايا الأزرار المجاورة أو قصّ التلميح داخل حاوية ذات overflow: hidden.

الصف 2 كود برمجي
HTML
<button type="button" class="btn btn-secondary"
  data-bs-toggle="tooltip" data-bs-placement="top"
  data-bs-title="Tooltip on top">Top</button>
<button type="button" class="btn btn-secondary"
  data-bs-toggle="tooltip" data-bs-placement="bottom"
  data-bs-title="Tooltip on bottom">Bottom</button>
الصف 3 ملاحظة هامة