شرح صفوف ومحتوى الفقرة
يعرض التلميح النصوص كنص مجرّد آمن افتراضياً (html: false). وعندما تفعّل تنسيق النصوص عبر data-bs-html="true" لعرض وسوم مثل <strong> أو <em>، يمرّر Bootstrap 5 السلسلة النصية تلقائياً عبر معقّم داخلي صارم (Sanitizer) يعتمد قائمة سماح بيضاء allowList ويجرّد فوراً أي وسوم <script> أو سمات تنفيذ خبيثة مثل onerror للحماية من ثغرات البرمجة عبر المواقع XSS.
وعند إزالة عنصر ديناميكي من الصفحة في تطبيقات الصفحة الواحدة، استدعِ tooltipInstance.dispose() لتحرير الذاكرة وإزالة أي فقاعة تلميح مفتوحة من DOM.
جدول مرجعي لخيارات ودوال التلميحات (Tooltips Reference)
| السمة / الدالة | الدور الوظيفي | ملاحظة الاستخدام القياسي |
|---|---|---|
data-bs-toggle="tooltip" | تعريف العنصر كمستهدف للتلميح | يتطلب تهيئة صريحة بباني bootstrap.Tooltip |
data-bs-title | نص أو محتوى التلميح | يمنع ظهور تلميح المتصفح الأصلي المزدوج |
data-bs-placement | تحديد اتجاه الظهور | يدعم top وbottom وleft وright |
data-bs-custom-class | إضافة كلاس لتخصيص متغيرات CSS | يلوّن الخلفية والسهم بمتغير --bs-tooltip-bg |
sanitize / allowList | تعقيم وسوم HTML من ثغرات XSS | مفعّل افتراضياً؛ لا تعطّله أبداً مع مدخلات المستخدمين |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت تفعيل تلميحات Bootstrap 5.3 الاختيارية بجافاسكريبت القياسية ومحرك Popper، والتحكم باتجاهاتها الأربعة، وتلوينها بمتغيرات CSS عبر data-bs-custom-class، وتغليف الأزرار المعطلة، وحمايتها بمعقّم XSS المدمج. الخطوة التالية: انتقل الآن إلى الدرس التالي لإتقان البالونات المنبثقة Popovers التي تضيف عنواناً ومحتوى تفصيلياً غنياً مع الإغلاق الذكي بالنقر الخارجي.