Bootstrap 5 Popovers

Pop-up

The Pop-up (Popover) component is similar to a tooltip; it is a pop-up box that appears when the user clicks on an element. The difference is that the pop-up can contain more content.

How to create a pop-up

To create a pop-up, please set data-bs-toggle="popover" attribute to add to the element.

Please use title The attribute specifies the title text of the pop-up box and uses data-bs-content The attribute specifies the text displayed in the pop-up box body:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Title" data-bs-content="Some content inside the popover">Toggle Popover</button>

Note:Pop-ups must be initialized with JavaScript to work.

The following code enables all pop-ups in the document:

Example

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

Try It Yourself

Position the pop-up box

By default, the pop-up box will appear on the right side of the element.

Please use data-bs-placement Set the position of the pop-up box at the top, bottom, left, or right of the element:

Example

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>

Try It Yourself

Note:If there is not enough space, the placement property may not work as expected. For example: if you use the top placement property at the top of the page (no reserved space), it will be displayed below or to the right of the element (anywhere there is space).

Close Popover

By default, the popover will close when the element is clicked again. However, you can use data-bs-trigger="focus" Property, setting this property allows the popover to be closed when clicked outside the element:

Example

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>

Try It Yourself

Hover Popover

Tip:If you want the popover to appear when the mouse pointer is moved over the element, use the value "hover" of data-bs-trigger Property:

Example

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me above</a>

Try It Yourself