تخصيص التلميحات بمتغيرات CSS | تلميحات الأدوات Tooltips في بوتستراب 5

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

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

منذ الإصدار 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، فيتلون الصندوق وسهمه المثلث تلقائياً بنفس المتغير!

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

مخطط تخصيص التلميحات عبر data-bs-custom-class وتغليف الأزرار المعطلة بعنصر span قابل للتركيز

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

HTML

<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>

جرّب بنفسك

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

Custom CSS Tooltip Styling تخصيص التلميحات بمتغيرات CSS

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

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