Bootstrap Popovers

A Popover is a small floating content box that appears when a user interacts with an element such as a button or link.

Popovers can contain:

• A title.
• Additional text.
• Helpful information.
• Short instructions.
• Contextual details.

Popovers are useful when a Tooltip does not provide enough space for the required information.

A basic Popover can be created using data-bs-toggle="popover", along with title and data-bs-content.

<button
type="button"
class="btn btn-primary"
data-bs-toggle="popover"
title="Popover Title"
data-bs-content="This is popover content.">

Click Me

</button>

The data-bs-toggle="popover" attribute identifies an element as a Bootstrap Popover trigger.

<button
data-bs-toggle="popover"
title="Information"
data-bs-content="More information here.">

Information

</button>

The Popover still needs to be initialized using Bootstrap JavaScript.

The title attribute provides the heading of the Popover.

<button
data-bs-toggle="popover"
title="Student Information"
data-bs-content="View student details here.">

Student

</button>

The data-bs-content attribute contains the main content displayed inside the Popover.

<button
data-bs-toggle="popover"
title="Help"
data-bs-content="Click this button to continue.">

Help

</button>

Bootstrap Popovers need to be initialized with JavaScript.

const popoverTriggerList =
document.querySelectorAll(
'[data-bs-toggle="popover"]'
);

const popoverList =
[...popoverTriggerList].map(
popoverTriggerEl =>
new bootstrap.Popover(
popoverTriggerEl
)
);

This code finds all Popover triggers and creates a Popover for each one.

Buttons are one of the most common elements used as Popover triggers.

<button
type="button"
class="btn btn-success"
data-bs-toggle="popover"
title="Success"
data-bs-content="Your operation was completed.">

Click Me

</button>

Popovers can also be attached to links.

<a
href="#"
data-bs-toggle="popover"
title="Website Information"
data-bs-content="This link provides additional information.">

More Info

</a>

Bootstrap Popovers can be positioned around their trigger element.

Common placements include:

• Top
• Bottom
• Left
• Right

Bootstrap can also adjust the final placement when necessary to keep the Popover visible.

Use data-bs-placement="top" to request a Popover above the trigger.

<button
class="btn btn-primary"
data-bs-toggle="popover"
data-bs-placement="top"
title="Top Popover"
data-bs-content="This Popover appears above the button.">

Top

</button>

Use data-bs-placement="bottom" to request a Popover below the trigger.

<button
class="btn btn-success"
data-bs-toggle="popover"
data-bs-placement="bottom"
title="Bottom Popover"
data-bs-content="This Popover appears below the button.">

Bottom

</button>

Use data-bs-placement="left" to request a Popover on the left side.

<button
class="btn btn-warning"
data-bs-toggle="popover"
data-bs-placement="left"
title="Left Popover"
data-bs-content="This Popover appears on the left.">

Left

</button>

Use data-bs-placement="right" to request a Popover on the right side.

<button
class="btn btn-danger"
data-bs-toggle="popover"
data-bs-placement="right"
title="Right Popover"
data-bs-content="This Popover appears on the right.">

Right

</button>

By default, Bootstrap Popovers are commonly triggered by clicking the element.

<button
data-bs-toggle="popover"
title="Click Trigger"
data-bs-content="Click the button to open this Popover.">

Click

</button>

The trigger can also be configured with JavaScript when different interaction behavior is required.

Different buttons can display different Popover messages.

<button
class="btn btn-primary"
data-bs-toggle="popover"
title="Add Student"
data-bs-content="Use this option to add a new student.">

Add Student

</button>

<button
class="btn btn-success"
data-bs-toggle="popover"
title="Save Student"
data-bs-content="Save the student information.">

Save

</button>

A Popover can be configured so that it can be dismissed when the user clicks somewhere else.

const popover =
new bootstrap.Popover(
element,
{
trigger: 'focus'
}
);

The focus trigger is commonly used when the Popover should close after the user moves focus away from the triggering element.

A Popover can be created directly with JavaScript.

const button =
document.querySelector('#myButton');

const popover =
new bootstrap.Popover(button);

This approach is useful when you need more control over the Popover configuration.

JavaScript can be used to specify the requested placement.

const popover =
new bootstrap.Popover(
element,
{
placement: 'bottom'
}
);

The requested placement can be adjusted by Bootstrap when there is not enough space in the requested direction.

Bootstrap Popovers can be configured to allow HTML content.

const popover =
new bootstrap.Popover(
element,
{
html: true
}
);

HTML Popovers should only use trusted or properly sanitized content. Never insert untrusted user input into an HTML-enabled Popover without appropriate sanitization.

Popover content can also be configured through JavaScript.

const popover =
new bootstrap.Popover(
element,
{
title: 'Student Details',
content: 'Student information is available here.'
}
);

This is useful when Popover content is generated dynamically.

If a page contains multiple Popovers, they can be initialized using a single JavaScript pattern.

const popoverTriggerList =
document.querySelectorAll(
'[data-bs-toggle="popover"]'
);

const popoverList =
[...popoverTriggerList].map(
popoverTriggerEl =>
new bootstrap.Popover(
popoverTriggerEl
)
);

This avoids writing separate initialization code for every Popover.

Popovers can provide additional information about dashboard actions without making the interface crowded.

<button
class="btn btn-info"
data-bs-toggle="popover"
title="View Details"
data-bs-content="View complete student information.">

View

</button>

<button
class="btn btn-warning"
data-bs-toggle="popover"
title="Edit Details"
data-bs-content="Edit student information.">

Edit

</button>

A student management system can use Popovers to display short additional information about students.

<button
class="btn btn-primary"
data-bs-toggle="popover"
title="Student Information"
data-bs-content="Name: Rahul | Course: Python | Status: Active">

Student Info

</button>

Popovers should be used carefully so that important information remains accessible to all users.

• Use meaningful trigger elements.
• Provide clear Popover titles.
• Do not place essential information only inside a Popover.
• Make interactive triggers keyboard accessible.
• Avoid overly long Popover content.
• Use appropriate focus behavior.

Popovers and Tooltips are similar but have different purposes.

Avoid these common mistakes when working with Bootstrap Popovers:

• Forgetting to initialize Popovers.
• Forgetting data-bs-toggle="popover".
• Using unclear Popover titles.
• Putting too much content inside a Popover.
• Using Popovers for essential information.
• Using unsanitized HTML content.
• Adding too many Popovers to one page.
• Forgetting keyboard accessibility.

The focus trigger can be used when you want a Popover to close when the triggering element loses focus.

const popover =
new bootstrap.Popover(
element,
{
trigger: 'focus'
}
);

This behavior is useful for interactive elements where the user should be able to dismiss the Popover naturally by moving focus away.

Bootstrap Popovers can be configured using JavaScript options.

const popover =
new bootstrap.Popover(
element,
{
placement: 'right',
trigger: 'focus',
title: 'Information',
content: 'Additional details'
}
);

Configuration makes it possible to control placement, trigger, content, and other Popover behavior.

The following example creates a simple action area with Popovers.

<div class="btn-group">

    <button
    class="btn btn-primary"
    data-bs-toggle="popover"
    title="View"
    data-bs-content="View complete record.">

    👁️

    </button>

    <button
    class="btn btn-warning"
    data-bs-toggle="popover"
    title="Edit"
    data-bs-content="Edit the selected record.">

    ✏️

    </button>

    <button
    class="btn btn-danger"
    data-bs-toggle="popover"
    title="Delete"
    data-bs-content="Delete the selected record.">

    🗑️

    </button>

</div>

This complete example combines Popover titles, content, placement, multiple buttons, and JavaScript initialization.

<div class="d-flex gap-2">

    <button
    class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-placement="top"
    title="Dashboard"
    data-bs-content="Open your main dashboard.">

    Dashboard

    </button>

    <button
    class="btn btn-warning"
    data-bs-toggle="popover"
    data-bs-placement="bottom"
    title="Edit Student"
    data-bs-content="Update student information.">

    Edit

    </button>

    <button
    class="btn btn-danger"
    data-bs-toggle="popover"
    data-bs-placement="right"
    title="Delete Student"
    data-bs-content="Remove this student record.">

    Delete

    </button>

</div>


<script>

const popoverTriggerList =
document.querySelectorAll(
'[data-bs-toggle="popover"]'
);

const popoverList =
[...popoverTriggerList].map(
popoverTriggerEl =>
new bootstrap.Popover(
popoverTriggerEl
)
);

</script>