What is bootstrap 4 popover?

Overview

In this shot, we’ll learn about the popover in bootstrap 4.

The popover is a small box that appears near an element in the DOM when the user clicks on the element. It provides information to the user about the element or component.

Create a popover with bootstrap4

We can create a popover with bootstrap4 by adding the data-toggle="popover" attribute to the element.

Syntax

<element data-toggle="popover" title="popover title" data-content="content inside the popover">
</element>

We provide the title to be displayed in the popover provided in the title attribute and text provided in the data-content attribute.

Example

Let’s look at an example:

Explanation

In the above code:

• Lines 7 to 10: We include all the prerequisites that are needed to run this popover, which are Bootstrap, Jquery, and Popper.
• Line 16: We create a popover using the bootstrap4 by providing the data-toggle="popover" attribute. We provide the text This is the title as the title attribute. And we provide the data-content as This is content inside the popover. It can store more data than the tooltip. This text displays when the user clicks on that element.
• Lines 20 to 22: We enable all the popovers present in the DOM when the document is ready.

Position the popover

We can display the popover in positions top, bottom, left, and right to the element. We can achieve this by providing the data-placement attribute to the element.