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.
We can create a popover with bootstrap4 by adding the
data-toggle="popover" attribute to the element.
<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
Let’s look at an example:
In the above code:
popover, which are Bootstrap, Jquery, and Popper.
data-toggle="popover"attribute. We provide the text
This is the titleas the
titleattribute. And we provide the
This is content inside the popover. It can store more data than the tooltip. This text displays when the user clicks on that element.
We can display the popover in positions
right to the element. We can achieve this by providing the
data-placement attribute to the element.
View all Courses