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.
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.
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.
