Bootstrap: مكونات التنبيه

Q: هل تتراكم عدة Toasts عند ظهورها في الوقت نفسه؟

نعم. ستتراكم عدة Toasts عموديًا في toast-container بترتيب ظهورها، مع الأحدث في الأعلى. لكل Toast مؤقت مستقل خاص به ولا يؤثر على الآخرين.

Q: هل سيقاطع role="alert" في صندوق التنبيه القراءة الحالية في قارئ الشاشة؟

نعم. role="alert" هو منطقة حية (live region)، ومعظم قارئات الشاشة ستقرأ محتواها فورًا، مما يقاطع أي شيء آخر يُقرأ. هذا هو التأثير المقصود للتنبيهات. إذا كنت ترغب في تقليل مستوى الإزعاج، يُنصح باستخدام Toast.

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات السابقة

الدرس 14: Carousel وModal

(2) 🎯 ما ستتعلّمه

استخدام alert لعرض رسائل إشعار بمستويات مختلفة
تنفيذ تنبيه قابل للإغلاق باستخدام alert-dismissible
تنفيذ إشعارات منبثقة مؤقتة باستخدام Toast
تنفيذ تلميحات (Tooltips) عند التمرير/النقر باستخدام Tooltip وPopover
التمييز بين السيناريوهات المناسبة لكلٍّ من Alert وToast وTooltip

(3) المشكلة

يعمل Charlie على تطوير ميزة إرسال تذكرة: مربع تنبيه أخضر للإرسال الناجح، وأحمر للفشل، وToast تختفي تلقائيًا بعد بضع ثوانٍ، وTooltip يظهر شرحًا عند التمرير فوق أزرار الإجراءات.

(4) الحل

يحتاج المستخدمون إلى ملاحظات فورية بعد تنفيذ إجراء—إرسال ناجح، فشل في الحفظ، تأكيد حذف، أو تلميجات لإجراءات. يوفّر Bootstrap ثلاثة مستويات مختلفة من مكونات الملاحظات: التنبيهات (Alerts) والإشعارات (Toasts) والتلميحات (Tooltips).

(5) الفوائد

يوفر استخدام مكونات الملاحظات في Bootstrap تجربة ملاحظات مثالية للمستخدم في مختلف السيناريوهات.

2. التنبيهات (Alerts)

▶ مثال: أساسيات Alert

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alert Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-primary" role="alert">Primary alert - a simple info message.</div>
    <div class="alert alert-success" role="alert">Success - your changes have been saved.</div>
    <div class="alert alert-danger" role="alert">Danger - something went wrong.</div>
    <div class="alert alert-warning" role="alert">Warning - please check your input.</div>
    <div class="alert alert-info" role="alert">Info - new updates are available.</div>

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Notice!</strong> This alert can be dismissed.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Well done!</h4>
      <p>Your account has been created successfully.</p>
      <hr>
      <p class="mb-0">Check your email for verification link.</p>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

(1) ألوان التنبيه

الفئة	الدلالة	الاستخدام
`alert-primary`	أزرق	معلومات عامة
`alert-success`	أخضر	عملية ناجحة
`alert-danger`	أحمر	خطأ/فشل
`alert-warning`	أصفر	تحذير/تنبيه
`alert-info`	سماوي	رسالة معلومات

(2) التنبيه القابل للإغلاق

HTML

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error!</strong> Please fix the highlighted fields.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

▶ جرّب الكود

3. Toast

HTML

<button class="btn btn-primary" onclick="showToast()">Show Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
  function showToast() {
    var toast = new bootstrap.Toast(document.getElementById('liveToast'))
    toast.show()
  }
</script>

▶ جرّب الكود

(1) بنية Toast

العنصر	الفئة	الوصف
الحاوي	`toast-container`	يُوضع في زاوية الشاشة
Toast	`toast`	بطاقة Toast فردية
الترويسة	`toast-header`	أيقونة + عنوان + وقت
المتن	`toast-body`	محتوى الرسالة

(2) إعدادات Toast

HTML

<div class="toast" data-bs-delay="3000">Auto-hide after 3 seconds</div>
<div class="toast" data-bs-autohide="false">No auto-hide (user must close)</div>

▶ جرّب الكود

4. Tooltips

HTML

<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
        title="Tooltip on top">Top tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
        title="Tooltip on right">Right tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
        title="Tooltip on bottom">Bottom tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
        title="Tooltip on left">Left tooltip</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function(el) {
    return new bootstrap.Tooltip(el)
  })
</script>

▶ جرّب الكود

5. Popovers

HTML

<button class="btn btn-lg btn-danger" data-bs-toggle="popover"
        title="Popover Title"
        data-bs-content="This is the popover body content.">
  Click to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>

▶ جرّب الكود

6. أمثلة إضافية لمكونات التنبيه

▶ مثال: عرض كامل للتنبيهات القابلة للإغلاق

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dismissible Alerts</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Success!</strong> Your changes have been saved.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Error!</strong> Please check your input and try again.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Warning!</strong> Your session will expire in 5 minutes.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Heads up!</strong> New software update is available.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

▶ مثال: مركز إشعارات Toast

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notifications</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <button class="btn btn-success" onclick="showSuccessToast()">Success Notification</button>
    <button class="btn btn-danger" onclick="showErrorToast()">Error Notification</button>

    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080;">
      <div id="successToast" class="toast" role="alert">
        <div class="toast-header text-white bg-success">
          <strong class="me-auto">✅ Success</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Your data has been saved successfully!
        </div>
      </div>
      <div id="errorToast" class="toast" role="alert">
        <div class="toast-header text-white bg-danger">
          <strong class="me-auto">❌ Error</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Something went wrong. Please try again.
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function showSuccessToast() {
      new bootstrap.Toast(document.getElementById('successToast')).show();
    }
    function showErrorToast() {
      new bootstrap.Toast(document.getElementById('errorToast')).show();
    }
  </script>
</body>
</html>

▶ جرّب الكود

▶ مثال: Tooltips (جميع الاتجاهات)

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Directions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5 text-center">
    <div class="mb-4">
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Top
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Right
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Bottom
      </button>
      <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Left
      </button>
    </div>
    <div>
      <button class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-html="true"
              title="<em>Rich</em> <b>Tooltip</b>">
        HTML Tooltip
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function(el) {
      return new bootstrap.Tooltip(el)
    })
  </script>
</body>
</html>

▶ جرّب الكود

HTML

<button class="btn btn-lg btn-primary me-2" data-bs-toggle="popover"
        title="Profile Info"
        data-bs-content="<strong>Alice Chen</strong><br>Senior Designer<br><span class='badge bg-success'>Online</span>"
        data-bs-html="true">
  HTML Popover
</button>

<button class="btn btn-lg btn-outline-danger me-2" data-bs-toggle="popover"
        title="Delete Confirmation"
        data-bs-content="Are you sure? This action cannot be undone."
        data-bs-trigger="focus">
  Focus Popover
</button>

<button class="btn btn-lg btn-secondary" data-bs-toggle="popover"
        title="Notification"
        data-bs-content="You have 3 unread messages."
        data-bs-placement="bottom">
  Bottom Popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>

▶ جرّب الكود

(1) مخطط اختيار مكون الإشعار

flowchart TD
    A[Need to notify user] --> B{Message importance}
    B -->|High/Immediate attention| C[Alert]
    B -->|Medium/Needs confirmation| D[Popover]
    B -->|Low/Temporary| E[Toast]
    C --> F{Requires user action?}
    F -->|Yes| G[Dismissible alert-dismissible]
    F -->|No| H[Static alert]
    E --> I{Auto-hide?}
    I -->|Yes| J[Default 5 seconds]
    I -->|No| K[data-bs-autohide=false]
    D --> L{Trigger method}
    L -->|Hover| M[Tooltip]
    L -->|Click| N[Popover]

لون التنبيه	الفئة	الدلالة	سيناريو الاستخدام
أزرق	`alert-primary`	معلومات	إعلانات النظام، تلميحات
أخضر	`alert-success`	نجاح	اكتملت العملية، تم الحفظ بنجاح
أحمر	`alert-danger`	خطأ	فشلت العملية، استثناء
أصفر	`alert-warning`	تحذير	تنتهي قريبًا، انتباه
سماوي	`alert-info`	تلميح	ميزات جديدة، إشعارات تحديث

إعداد Toast	السمة	التأثير
إخفاء تلقائي	`data-bs-autohide="true"`	افتراضي، يختفي بعد بضع ثوانٍ
إغلاق يدوي	`data-bs-autohide="false"`	يجب على المستخدم النقر للإغلاق
زمن التأخير	`data-bs-delay="3000"`	يختفي بعد 3 ثوانٍ (بالمللي ثانية)
تفعيل الحركة	`class="toast fade"`	حركة تلاشي تدريجي
حاوي الموضع	`toast-container` + positioning	مثبّت في زاوية الشاشة

بُعد المقارنة	Tooltip	Popover
طريقة التشغيل	تمرير الفأرة	نقر
حجم المحتوى	كمية صغيرة من النص	عنوان + متن + HTML
الاتجاه	top/right/bottom/left	نفس الخيارات
دعم HTML	يتطلب `data-bs-html="true"`	يتطلب `data-bs-html="true"`
طريقة الإغلاق	يختفي عند الابتعاد	نقر مرة أخرى أو الضغط على Esc
السيناريو النموذجي	أوصاف الأيقونات، شرح الاختصارات	تلميحات النماذج، معاينة التفاصيل

❓ أسئلة شائعة

س لماذا لا يظهر الـ Tooltip الخاص بي؟

ج السبب الأكثر شيوعًا: لم يتم تهيئة JavaScript! لا تعمل Tooltips تلقائيًا؛ يجب تنفيذ new bootstrap.Tooltip(element) أو كود التهيئة الدفعي.

س ما فائدة role="alert" في Alert؟

ج إنها سمة إمكانية وصول تخبر قارئات الشاشة بأن هذه رسالة مهمة. يُنصح دائمًا بتضمينها.

س ما السيناريوهات المناسبة لكلٍّ من Toast وAlert؟

ج Toast مناسب للإشعارات السلبية منخفضة الإزعاج—فهو لا يحجب إجراءات المستخدم ويختفي تلقائيًا بعد بضع ثوانٍ. Alert مناسب للمعلومات التي تتطلب انتباه المستخدم—فهي تبقى في الصفحة حتى يغلقها المستخدم.

س هل تتراكم عدة Toasts عند ظهورها في الوقت نفسه؟

ج نعم. ستتراكم عدة Toasts عموديًا في toast-container بترتيب ظهورها، مع الأحدث في الأعلى. لكل Toast مؤقت مستقل خاص به ولا يؤثر على الآخرين.

س هل سيقاطع role="alert" في صندوق التنبيه القراءة الحالية في قارئ الشاشة؟

ج نعم. role="alert" هو منطقة حية (live region)، ومعظم قارئات الشاشة ستقرأ محتواها فورًا، مما يقاطع أي شيء آخر يُقرأ. هذا هو التأثير المقصود للتنبيهات. إذا كنت ترغب في تقليل مستوى الإزعاج، يُنصح باستخدام Toast.

📖 ملخص

Alerts: alert alert-{color}، وalert-dismissible + btn-close للإغلاق
Toast: toast + toast-header + toast-body، يُفعّل عبر استدعاء .show() في JS
Tooltip: data-bs-toggle="tooltip" + title، يجب تهيئته بـ JS
Popover: مشابه لـ Tooltip لكنه يدعم العناوين ومحتوى أكثر

📝 تمارين

⭐ أنشئ تدفق ملاحظات لإرسال نموذج: اعرض Alert أخضر قابل للإغلاق عند الإرسال الناجح، وAlert أحمر عند الفشل.
⭐⭐ نفّذ "إشعار رسالة جديدة" باستخدام Toast: النقر على زر يُطلق Toast يعرض "New message from Alice" ويختفي تلقائيًا بعد 3 ثوانٍ.
⭐⭐⭐ ضع 5 أزرار أيقونات لروابط وسائل التواصل الاجتماعي على صفحة. يجب أن يعرض Tooltip لكل زر اسم المنصة المناسب، مع ضبط الاتجاه بشكل موحد على bottom.

الدرس السابق: Carousel وModal · الدرس التالي: Accordion

فريق Web-Tutorial التقني

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

من نحن

Bootstrap: مكونات التنبيه

1. مقدمة الدرس

(1) المتطلبات السابقة

(2) 🎯 ما ستتعلّمه

(3) المشكلة

(4) الحل

(5) الفوائد

2. التنبيهات (Alerts)

▶ مثال: أساسيات Alert

(1) ألوان التنبيه

(2) التنبيه القابل للإغلاق

3. Toast

(1) بنية Toast

(2) إعدادات Toast

4. Tooltips

5. Popovers

6. أمثلة إضافية لمكونات التنبيه

▶ مثال: عرض كامل للتنبيهات القابلة للإغلاق

▶ مثال: مركز إشعارات Toast

▶ مثال: Tooltips (جميع الاتجاهات)

▶ مثال: Popover بمحتوى HTML

(1) مخطط اختيار مكون الإشعار

❓ أسئلة شائعة

📖 ملخص

📝 تمارين