Bootstrap5 pop-up box

The pop-up box control is similar to the prompt box, it is displayed after the mouse is clicked on the element, unlike the prompt box, it can display more content.

How to create a popup box

By adding to elements data-bs-toggle="popover" to create a pop-up box.

title the content of the property is the title of the pop-up box, and the data-bs- content property displays the text content of the pop-up box:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popup Title" data-bs-content="Popup Box Content">Click me multiple times</button>

Note: the pop-up box should be written in the initialization code of JavaScript.

The following examples can use pop-up boxes anywhere in the document:

Example

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

Specify the location of the pop-up box

By default, the pop-up box is displayed on the right side of the element.

You can use the ‘data bs placement’ attribute to set the direction of the pop-up box display: top , bottom , left or right :

Example

<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="I am the content section">Click me</a>
<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="I am the content section">Click me</a>
<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="I am the content section">Click me</a>
<a href="#" title="title" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="I am the content section">Click me</a>

Close the pop-up box

By default, the pop-up box closes after clicking on the specified element again, and you can use the data-bs-trigger="focus" property to close the pop-up box by setting the area outside the mouse click element:

Example

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

Tip: if you want to display and remove the mouse over the element, you can use the data-bs-trigger property and set the value to “hover”

Example

<a href="#" title="title" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="some content">Move the mouse over to me</a>