تفعيل التلميحات بجافاسكريبت | تلميحات الأدوات Tooltips في بوتستراب 5

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

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

توفّر التلميحات العائمة Tooltips في Bootstrap 5.3 رسائل إرشادية مختصرة تظهر عند تمرير المؤشر hover أو نقل التركيز بلوحة المفاتيح focus فوق الأزرار والأيقونات والروابط المختصرة، مستبدلةً تلميح المتصفح التقليدي البطيء بتجربة بصرية فورية موحّدة.

على خلاف القوائم المنسدلة والنوافذ الحوارية، صُممت التلميحات لتكون ميزة اختيارية التفعيل Opt-in حفاظاً على الأداء العام للصفحة؛ لذا يجب تضمين ملف bootstrap.bundle.min.js (الذي يدمج مكتبة Popper لحساب الإحداثيات) ثم تهيئة العناصر صراحةً عبر باني new bootstrap.Tooltip(el) مع كتابة النص داخل السمة الحديثة data-bs-title.

الصف 2 صورة توضيحية

مخطط خطوات تفعيل التلميحات عبر السمة data-bs-toggle ومحرك Popper وباني bootstrap.Tooltip

الصف 3 كود برمجي

HTML

<button type="button" class="btn btn-primary"
  data-bs-toggle="tooltip"
  data-bs-title="Save draft (Ctrl+S)">
  Save Draft
</button>
<script>
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
    .forEach(el => new bootstrap.Tooltip(el));
</script>

جرّب بنفسك

الصف 4 ملاحظة هامة

Initializing Tooltips in JS تفعيل التلميحات بجافاسكريبت

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

جميع فقرات هذا الدرس (تلميحات الأدوات Tooltips في بوتستراب 5)