Home » Bootstrap 4 Popover

Bootstrap 4 Popover

In this article, we will learn about the popover functionality in Bootstrap 4.

What do you mean by bootstrap4 Popover?

In Bootstrap4, Popover is much like a tooltip, imparting a prolonged view whole with a heading. For the Popover to activate, a user desires to hover on activate Popover. Popover may be created using data-toggle = “popover” characteristic, and content material may be supplied for the Popover with the aid of using data-content material characteristics.

Following are some properties used in Bootstrap4 Popover:

Sr.No Property Name Type Default Value Description
1. animation boolean true This attribute applies a CSS fade transition to the Popover.
2. content string | element | function It set the default content value if the data-content attribute isn’t present.
3. delay number | object 0 This attribute is used to delay an object.
Example:
delay: { “show”: 500, “hide”: 100 }
4. html boolean false This attribute inserts HTML into the popover.
5. placement string | function ‘right’ This property is used to set the position of the Popover – top | bottom | left | right | auto.
6. title string | element | function This attribute sets the default title value if the title attribute isn’t present.

Let’s take various examples of bootstrap4 Popover.

Example 1:

Explanation:

In the above example, we have created a bootstrap 4 popover example.

Output:

Below is the output of this example.

Bootstrap 4 Popover

Example 2:

Explanation:

In the above example, we have created a bootstrap 4 popover example with placement, i.e., left, right, top and bottom.

Output:

Below is the output of this example.

Bootstrap 4 Popover

Example 3:

Explanation:

In the above example, we have created a bootstrap 4 popover example with html content property, i.e.html, is added to the Popover on hover.

Output:

Below is the output of this example.

Bootstrap 4 Popover


You may also like