التلميحات (Tooltips) والنوافذ المنبثقة (Popovers) في Bootstrap

الدرس الرابع عشر: التلميحات (Tooltips) والنوافذ المنبثقة (Popovers) في Bootstrap

في تصميم واجهات المستخدم الحديثة، من المهم تحسين التفاعل مع المستخدم من خلال إضافة عناصر مرئية تقدم مزيدًا من المعلومات بدون التأثير على تجربة الاستخدام الأساسية. في Bootstrap، يتم تقديم مكونين قويين يساعدان على تقديم هذه المعلومات بشكل مرن، وهما التلميحات (Tooltips) و النوافذ المنبثقة (Popovers). كلاهما يوفر طريقة لعرض محتوى إضافي للمستخدم عند التفاعل مع العناصر المختلفة مثل الأزرار والروابط.

في هذا الدرس، سنتعرف على كيفية إضافة التلميحات والنوافذ المنبثقة باستخدام Bootstrap، مع شرح كيفية استخدام هذه المكونات بطرق متنوعة لتقديم تجربة مستخدم أكثر تفاعلية.

---

1. التلميحات (Tooltips) في Bootstrap

التلميحات هي رسائل قصيرة تظهر عند مرور الماوس فوق عنصر معين، مما يوفر مزيدًا من المعلومات دون التسبب في ازدحام الصفحة. يتم تفعيل التلميحات بسهولة باستخدام فئة tooltip في Bootstrap، وتعتبر أداة رائعة للمساعدة في عرض معلومات إضافية عند مرور الماوس أو التركيز على العناصر.

كيفية إضافة التلميحات باستخدام data-toggle="tooltip":

بدايةً، يمكننا تفعيل التلميحات عن طريق استخدام خاصية data-toggle="tooltip" على أي عنصر HTML، مثل الأزرار أو الروابط، كما يلي:

<!-- الزر مع التلميح -->
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="هذا زر لفتح التلميحات">
  مرر الماوس هنا
</button>

شرح الكود:

• data-bs-toggle="tooltip": يحدد أن العنصر يجب أن يكون له تلميح عند المرور فوقه.
• data-bs-placement="top": يحدد مكان التلميح بالنسبة للعنصر. يمكن أن يكون إما “top” (أعلى العنصر)، “bottom” (أسفل العنصر)، “left” (يسار العنصر)، أو “right” (يمين العنصر).
• title="...": النص الذي سيظهر في التلميح.

تفعيل التلميحات باستخدام JavaScript:

في Bootstrap 5، يجب تفعيل التلميحات باستخدام JavaScript بعد تحميل الصفحة. فيما يلي كيفية تفعيل التلميحات لجميع العناصر التي تحتوي على خاصية data-bs-toggle="tooltip":

// تفعيل التلميحات لجميع العناصر باستخدام JavaScript
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

بهذه الطريقة، سيظهر التلميح عندما يمر المستخدم بالماوس فوق العناصر التي تحتوي على الخاصية data-bs-toggle="tooltip".

---

2. النوافذ المنبثقة (Popovers) في Bootstrap

النوافذ المنبثقة (Popovers) هي نوافذ صغيرة تظهر عند التفاعل مع عنصر معين، مثل النقر على زر أو تمرير الماوس عليه. يختلف Popover عن Tooltip في أنه يمكن أن يحتوي على محتوى أكبر، مثل نص طويل أو عناصر HTML معقدة. النوافذ المنبثقة مفيدة لعرض معلومات تفصيلية أو تعليمات إضافية دون أن تخرج عن التصميم الأساسي للصفحة.

كيفية إضافة نافذة منبثقة باستخدام data-toggle="popover":

يمكنك إضافة نافذة منبثقة بسهولة باستخدام خاصية data-bs-toggle="popover". إليك مثالاً على كيفية إضافة نافذة منبثقة على زر:

<!-- الزر مع النافذة المنبثقة -->
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-content="هذه هي نافذة منبثقة تحتوي على معلومات إضافية">
  اضغط هنا
</button>

شرح الكود:

• data-bs-toggle="popover": يشير إلى أن هذا العنصر يحتوي على نافذة منبثقة يجب عرضها عند التفاعل معه.
• data-bs-content="...": يحتوي على المحتوى الذي سيظهر في النافذة المنبثقة.

تخصيص مكان ظهور النافذة المنبثقة:

يمكنك تخصيص مكان ظهور النافذة المنبثقة باستخدام خاصية data-bs-placement، تمامًا كما فعلنا مع التلميحات. يمكنك تحديد “top”، “bottom”، “left”، أو “right” لتحديد مكان ظهور النافذة المنبثقة.

<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="محتوى النافذة المنبثقة">
  اضغط هنا لعرض النافذة
</button>

تفعيل النوافذ المنبثقة باستخدام JavaScript:

كما هو الحال مع التلميحات، يتم تفعيل النوافذ المنبثقة في Bootstrap باستخدام JavaScript. بعد تحميل الصفحة، يجب تفعيل النوافذ المنبثقة باستخدام الشيفرة التالية:

// تفعيل النوافذ المنبثقة لجميع العناصر باستخدام JavaScript
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

---

3. الفرق بين التلميحات (Tooltips) والنوافذ المنبثقة (Popovers)

المفهوم	التلميحات (Tooltips)	النوافذ المنبثقة (Popovers)
الغرض	تقديم معلومات قصيرة عند التفاعل مع العنصر.	عرض محتوى إضافي أو تعليمات مفصلة.
الحجم	صغير ويعرض نصًا قصيرًا فقط.	يمكن أن يحتوي على نصوص طويلة أو عناصر HTML معقدة.
التفاعل	يظهر عند مرور الماوس فوق العنصر.	يظهر عند النقر على العنصر أو تمرير الماوس عليه.
التخصيص	تخصيص مكان التلميح باستخدام data-bs-placement.	تخصيص مكان الpopover باستخدام data-bs-placement.

---

4. استخدام التلميحات والنوافذ المنبثقة مع JavaScript

يمكنك استخدام JavaScript لإضافة التفاعل والوظائف الخاصة بالتلميحات والنوافذ المنبثقة. في المثال التالي، نستخدم JavaScript لإظهار نافذة منبثقة عند النقر على زر، أو لتغيير محتوى التلميح عند مرور الماوس:

// تفعيل التلميح عند النقر على الزر
var tooltipElement = document.getElementById('tooltipBtn');
tooltipElement.addEventListener('click', function () {
  var tooltip = new bootstrap.Tooltip(tooltipElement, {
    title: 'تم النقر على الزر!'
  });
  tooltip.show();
});

// تفعيل نافذة منبثقة عند النقر
var popoverElement = document.getElementById('popoverBtn');
popoverElement.addEventListener('click', function () {
  var popover = new bootstrap.Popover(popoverElement, {
    content: 'تم النقر على الزر لعرض المحتوى.',
    placement: 'top'
  });
  popover.show();
});

---

5. الخاتمة

التلميحات والنوافذ المنبثقة في Bootstrap هما من الأدوات الأساسية التي تساعد في تحسين تجربة المستخدم بشكل كبير. من خلال استخدام هذه المكونات، يمكنك عرض معلومات إضافية للمستخدم بطريقة مرنة وجذابة دون التأثير على ترتيب الصفحة أو الحاجة إلى تحميل صفحات جديدة.

• التلميحات: مثالية لعرض نصوص قصيرة وسريعة عند مرور الماوس.
• النوافذ المنبثقة: توفر مساحة أكبر لعرض محتوى إضافي مثل النماذج أو التعليمات التفصيلية.

من خلال تخصيص مكان ظهور هذه المكونات وتفعيلها باستخدام JavaScript، يمكنك تحسين التفاعل مع المستخدم بطريقة احترافية وتوفير تجربة مستخدم أفضل.