How to use the Bootstrap 4 popover

What is popover?

The popover is one of Bootstrap's plugins that enable users to get more details about an element when they click on it. It can have more textual content than tooltip. It is used to add a description to an element without tampering with the initial layout.

Let's look at an example.

Example

Code explanation

Line 15: We apply the popover to a button element and three attributes make this possible. They are as follows:

• data-toggle="popover": This is used together with Bootstrap JavaScript in line 20 to locate and display the popover.
• title="popover header": This is the heading of the popover. For this popover, we use popover header. Your title can be more relevant to the element you are applying it to.

• data-content="some content describing the button" : This is inside the data-content. It is where we write the content we want the user to see in our popover.

Feel free to experiment with the code samples made available.