Bootstrap 5 Framework

Toasts and Popovers

13 min Lesson 32 of 40

Toasts and Popovers in Bootstrap 5

Toasts are lightweight notifications designed to mimic push notifications. Popovers are small overlay boxes that provide additional information when triggered. Both are essential for enhancing user experience.

Toast Notifications

Toasts are non-intrusive notifications that appear temporarily and automatically dismiss.

<!-- Basic Toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="icon.svg" class="rounded me-2" alt="Icon">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

<!-- Button to trigger toast -->
<button type="button" class="btn btn-primary" id="liveToastBtn">Show Toast</button>

<script>
const toastTrigger = document.getElementById('liveToastBtn');
const toastElement = document.querySelector('.toast');

if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
        const toast = new bootstrap.Toast(toastElement);
        toast.show();
    });
}
</script>
        

Note: Unlike modals, toasts require JavaScript initialization. They don't show automatically without calling .show().

Toast Color Variants

Use background and text utilities to style toasts.

<!-- Success Toast -->
<div class="toast align-items-center text-bg-success border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Operation completed successfully!
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- Danger Toast -->
<div class="toast align-items-center text-bg-danger border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Error! Something went wrong.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- Warning Toast -->
<div class="toast align-items-center text-bg-warning border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Warning! Please review your input.
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- Info Toast -->
<div class="toast align-items-center text-bg-info border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            New updates are available.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>
        

Toast Positioning

Position toasts using containers with custom CSS or utility classes.

<!-- Toast Container (top-right) -->
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast" role="alert">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            Top-right position
        </div>
    </div>
</div>

<!-- Bottom-left -->
<div class="toast-container position-fixed bottom-0 start-0 p-3"></div>

<!-- Top-center -->
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3"></div>

<!-- Bottom-center -->
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3"></div>

<!-- Middle-center -->
<div class="toast-container position-fixed top-50 start-50 translate-middle p-3"></div>
        

Stacking Toasts

Multiple toasts stack vertically within their container.

<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast show" role="alert">
        <div class="toast-header">
            <strong class="me-auto">First Notification</strong>
            <small>just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            This is the first toast message.
        </div>
    </div>

    <div class="toast show" role="alert">
        <div class="toast-header">
            <strong class="me-auto">Second Notification</strong>
            <small>2 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            This is the second toast message.
        </div>
    </div>
</div>
        

Toast Options and JavaScript

Configure toast behavior with JavaScript options.

<script>
// Get toast element
const toastEl = document.getElementById('myToast');

// Create toast with options
const toast = new bootstrap.Toast(toastEl, {
    animation: true,    // Enable fade animation
    autohide: true,     // Auto hide after delay
    delay: 5000         // Delay in milliseconds (default 5000)
});

// Show toast
toast.show();

// Hide toast
toast.hide();

// Dispose toast instance
toast.dispose();

// Event listeners
toastEl.addEventListener('show.bs.toast', function () {
    console.log('Toast is about to show');
});

toastEl.addEventListener('shown.bs.toast', function () {
    console.log('Toast is fully shown');
});

toastEl.addEventListener('hide.bs.toast', function () {
    console.log('Toast is about to hide');
});

toastEl.addEventListener('hidden.bs.toast', function () {
    console.log('Toast is fully hidden');
});
</script>
        

Popovers Basics

Popovers display additional information when an element is clicked or hovered.

<!-- Basic Popover -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-title="Popover Title"
    data-bs-content="This is the popover content.">
    Click to Toggle Popover
</button>

<!-- Initialize all popovers -->
<script>
// Popovers need to be initialized
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>
        

Important: Popovers must be initialized with JavaScript before they work. Add the initialization script to enable popovers.

Popover Directions

Control the placement of popovers using the data-bs-placement attribute.

<!-- Top -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="top"
    data-bs-content="Top popover">
    Popover on Top
</button>

<!-- Right -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="right"
    data-bs-content="Right popover">
    Popover on Right
</button>

<!-- Bottom (default) -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="bottom"
    data-bs-content="Bottom popover">
    Popover on Bottom
</button>

<!-- Left -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="left"
    data-bs-content="Left popover">
    Popover on Left
</button>
        

Popover Triggers

Customize how popovers are triggered.

<!-- Click trigger (default) -->
<button type="button" class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-trigger="click"
    data-bs-content="Click to show/hide">
    Click Trigger
</button>

<!-- Hover trigger -->
<button type="button" class="btn btn-success"
    data-bs-toggle="popover"
    data-bs-trigger="hover"
    data-bs-content="Hover to show">
    Hover Trigger
</button>

<!-- Focus trigger -->
<button type="button" class="btn btn-info"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-content="Focus to show">
    Focus Trigger
</button>

<!-- Manual trigger -->
<button type="button" class="btn btn-warning" id="manualPopover"
    data-bs-toggle="popover"
    data-bs-trigger="manual"
    data-bs-content="Controlled via JavaScript">
    Manual Trigger
</button>

<script>
// Manual control
const manualPopover = new bootstrap.Popover(document.getElementById('manualPopover'));
// Show: manualPopover.show();
// Hide: manualPopover.hide();
</script>
        

Dismissible Popover

Create popovers that dismiss when clicking outside.

<button type="button" class="btn btn-danger"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-title="Dismissible Popover"
    data-bs-content="Click anywhere outside to close">
    Dismissible Popover
</button>
        

Tip: Use data-bs-trigger="focus" to create dismissible popovers that close when you click outside.

Popover with HTML Content

Include HTML content inside popovers.

<button type="button" class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-html="true"
    data-bs-title="<strong>HTML Title</strong>"
    data-bs-content="<p>This is <em>HTML</em> content!</p><a href='#'>Click me</a>">
    Popover with HTML
</button>

<!-- Or via JavaScript -->
<script>
const popover = new bootstrap.Popover(element, {
    html: true,
    title: '<strong>HTML Title</strong>',
    content: '<p>HTML <em>content</em></p>'
});
</script>
        

Security Warning: Be careful when using HTML content in popovers, especially if the content comes from user input. Always sanitize user-provided HTML to prevent XSS attacks.

Popover Options

Advanced popover configuration options.

<script>
const popover = new bootstrap.Popover(element, {
    animation: true,           // Apply fade transition
    container: 'body',         // Append to specific element
    delay: 0,                  // Delay showing/hiding (ms)
    html: false,               // Allow HTML content
    placement: 'right',        // Popover placement
    trigger: 'click',          // How popover is triggered
    title: 'Popover Title',    // Title text
    content: 'Content here',   // Body text
    offset: [0, 8],           // Offset from target
    fallbackPlacements: ['top', 'bottom']  // Alternative placements
});
</script>
        

Practice Exercise

Task: Create a notification system with the following features:

Four buttons: Success, Error, Warning, Info
Each button shows a colored toast in the top-right corner
Toasts should auto-hide after 4 seconds
Add appropriate icons and messages for each type
Include a "Clear All" button that hides all visible toasts

Bonus Challenge: Create a user profile card with multiple popovers:

Hover over avatar to show full bio
Click email icon to show complete email address
Click info icon to show account details
Each popover should have appropriate styling

Best Practices

Use toasts for non-critical notifications that don't require user action
Keep toast messages concise and clear
Position toasts consistently (usually top-right or bottom-right)
Don't overwhelm users with too many simultaneous toasts
Always initialize popovers and tooltips with JavaScript
Use popovers for supplementary information, not critical content
Ensure popovers don't obscure important UI elements
Test popover positioning on different screen sizes
Provide alternative ways to access popover content for accessibility