في هذا الدرس 5تصفّح المواضيع
توفّر التلميحات العائمة Tooltips في Bootstrap 5.3 رسائل إرشادية مختصرة تظهر عند تمرير المؤشر hover أو نقل التركيز بلوحة المفاتيح focus فوق الأزرار والأيقونات والروابط المختصرة، مستبدلةً تلميح المتصفح التقليدي البطيء بتجربة بصرية فورية موحّدة.
على خلاف القوائم المنسدلة والنوافذ الحوارية، صُممت التلميحات لتكون ميزة اختيارية التفعيل Opt-in حفاظاً على الأداء العام للصفحة؛ لذا يجب تضمين ملف bootstrap.bundle.min.js (الذي يدمج مكتبة Popper لحساب الإحداثيات) ثم تهيئة العناصر صراحةً عبر باني new bootstrap.Tooltip(el) مع كتابة النص داخل السمة الحديثة data-bs-title.
<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>يدعم التلميح أربعة اتجاهات تموضع قياسية تُحدَّد عبر السمة data-bs-placement بقيم: top (الافتراضي)، وbottom، وright، وleft. وبفضل محرك Popper، ينقلب التلميح تلقائياً للاتجاه المقابل إذا اقترب الزر من حافة نافذة العرض بحيث لا يُقتطع النص خارج الشاشة.
عندما تضع زر التلميح داخل مجموعة أزرار .btn-group أو مجموعة حقول .input-group، تأكد من إلحاق التلميح بجسم المستند عبر data-bs-container="body" لتفادي كسر زوايا الأزرار المجاورة أو قصّ التلميح داخل حاوية ذات overflow: hidden.
<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>منذ الإصدار Bootstrap 5.2 أصبح تخصيص ألوان التلميح ومسافاته في غاية النظافة عبر متغيرات CSS المحلية مثل --bs-tooltip-bg و--bs-tooltip-color و--bs-tooltip-max-width و--bs-tooltip-opacity.
لتطبيق السمة المخصصة على تلميح معين دون المساس ببقية تلميحات الموقع، مرّر اسم كلاس مخصص عبر السمة data-bs-custom-class="brand-tooltip"؛ حيث يضيفه Bootstrap مباشرةً إلى عقدة .tooltip المولّدة لحظة ظهورها في DOM، فيتلون الصندوق وسهمه المثلث تلقائياً بنفس المتغير!
<style>
.brand-tip {
--bs-tooltip-bg: var(--bs-primary);
--bs-tooltip-color: var(--bs-white);
}
</style>
<button type="button" class="btn btn-outline-primary"
data-bs-toggle="tooltip" data-bs-custom-class="brand-tip"
data-bs-title="Themed via CSS variables!">Hover Me</button>لا تُطلق المتصفحات أحداث الفأرة أو التركيز (mouseover / focus) على الأزرار التي تحمل السمة disabled؛ ولذلك لن يعمل التلميح إذا وضعته على زر معطّل مباشرةً، مع أن المستخدم يحتاج هنا تحديداً لمعرفة سبب تعطيل زر الإرسال أو الترقية!
الحل الهندسي القياسي في Bootstrap 5 هو إحاطة الزر المعطل بغلاف <span class="d-inline-block" tabindex="0"> يحمل سمات التلميح هو نفسه، مع ضبط pointer-events: none (أو كلاس .pe-none) على الزر الداخلي المعطل حتى تنتقل أحداث المؤشر ولوحة المفاتيح بسلاسة إلى الغلاف الأب.
<span class="d-inline-block" tabindex="0"
data-bs-toggle="tooltip"
data-bs-title="Verify email first to publish">
<button class="btn btn-primary pe-none"
type="button" disabled>Publish Course</button>
</span>يعرض التلميح النصوص كنص مجرّد آمن افتراضياً (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 التي تضيف عنواناً ومحتوى تفصيلياً غنياً مع الإغلاق الذكي بالنقر الخارجي.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Opt-in Initialization التهيئة الاختيارية (Opt-in)
- نمط تصميم يتطلب تفعيل التلميحات صراحةً عبر جافاسكريبت بدلاً من المسح التلقائي لكل عناصر الصفحة حفاظاً على سرعة الأداء.
- للمراجعة
- 02 Popper Positioning Engine محرك التموضع (Popper)
- المكتبة المدمجة داخل حزمة Bootstrap لحساب إحداثيات العناصر العائمة وعكس اتجاهها تلقائياً عند حواف الشاشة.
- للمراجعة
- 03 Custom Tooltip Class كلاس التلميح المخصص
- توظيف السمة data-bs-custom-class لتمرير متغيرات CSS لونية وحجمية لتلميح محدد مع تلوين سهمه تلقائياً.
- للمراجعة
- 04 HTML Sanitizer AllowList قائمة السماح في المعقّم
- مرشّح أمان مدمج يحذف الوسوم والسمات التنفيذية الخطرة تلقائياً عند تفعيل عرض HTML داخل التلميحات والبالونات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 XSS البرمجة عبر المواقع
- Cross-Site Scripting
- ثغرة أمنية يمنعها معقّم Bootstrap المدمج عبر تجريد وسوم السكربت والسمات التنفيذية الخبيثة.
- للمراجعة
- 02 DOM نموذج كائن المستند
- Document Object Model
- شجرة المستند الحية التي يحقن فيها Bootstrap عنصر التلميح عند المرور ويزيله عند انتهاء العرض.
- للمراجعة
- 03 ARIA تطبيقات الإنترنت الغنية المتاحة
- Accessible Rich Internet Applications
- سمات إتاحة مثل aria-describedby يربطها Bootstrap تلقائياً بين الزر المحفّز وفقاعة التلميح النشطة.
- للمراجعة
- 04 SPA تطبيق الصفحة الواحدة
- Single-Page Application
- بنية واجهات ديناميكية يلزم فيها استدعاء dispose() قبل إزالة العنصر لمنع بقاء التلميح معلقاً في الشاشة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ 4 أزرار تستخدم data-bs-toggle="tooltip" وdata-bs-title بالاتجاهات الأربعة مع تخصيص لون الخلفية عبر data-bs-custom-class ومتغير --bs-tooltip-bg.
-
غلّف زراً معطلاً داخل عنصر span يحمل d-inline-block وtabindex="0" وسمات التلميح ثم فعّله بجافاسكريبت القياسية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
لماذا لا تعمل تلميحات Bootstrap 5 تلقائياً إلا بعد تشغيل كود التهيئة في جافاسكريبت؟
جُعلت التلميحات والبالونات اختيارية التفعيل Opt-in لتفادي عبء فحص كل عناصر الصفحة تلقائياً، فتُهيّأ بباني bootstrap.Tooltip.
أي ملف جافاسكريبت يتضمن مكتبة Popper مدمجة مسبقاً لتعمل التلميحات دون استيراد إضافي؟
يدمج ملف bootstrap.bundle.min.js مكتبة Popper مع كافة إضافات Bootstrap 5 في ملف واحد جاهز.
استخدام السمة data-bs-title بدلاً من السمة التقليدية title يمنع ظهور تلميح المتصفح الافتراضي المزدوج.
لا يعرض المتصفح تلميحاً أصفر افتراضياً للسمة data-bs-title، مما يمنح Bootstrap تحكماً كاملاً ونظيفاً.
ما الطريقة الصحيحة لإرفاق تلميح بزر معطّل (disabled) ليعمل مع الفأرة ومفتاح Tab معاً؟
يلتقط الغلاف القابل للتركيز أحداث المرور ولوحة المفاتيح لأن العناصر المعطلة لا تطلق تلك الأحداث في المتصفح.
أي سمة تضيف كلاس CSS مخصصاً مباشرةً إلى عنصر التلميح المولّد لتلوينه بمتغيرات CSS؟
تمرّر السمة data-bs-custom-class الكلاس المخصص إلى حاوية التلميح الخارجية فيتلون الصندوق والسهم معاً.
عند ضبط السمة data-bs-html="true" يتوقف معقّم الحماية من XSS تلقائياً في Bootstrap 5.
يظل المعقّم نشطاً افتراضياً حتى مع تفعيل data-bs-html="true" حيث يصفّي الوسوم وفق قائمة allowList الآمنة.
أي سمة تمنع اقتصاص التلميح أو تشوه حواف الأزرار المجاورة عند وضعه داخل مجموعة .btn-group؟
إلحاق عنصر التلميح بوسم body يمنع تأثر محددات الأشقاء داخل مجموعة الأزرار ويتفادى القص الناتج عن overflow.
ما الدالة البرمجية المخصصة لتدمير نسخة التلميح وتحرير مستمعات الأحداث قبل حذف العنصر من الصفحة؟
تزيل دالة dispose() نسخة الإضافة وتفصل مستمعات الأحداث وتمنع بقاء أي تلميح يتيم في الشاشة.