Popover
Bootstrap 4 Popover with Material Design UI
Popover is similar to tooltips; it is a pop-up box that appears when user click or hover on an element.
Popovers whose both title and content are zero-length are never displayed.
Popover On Click
To make the Popover open on click, use data-trigger="click". To specify the direction of Popover use attribute data-placement with left, right, top, and bottom values.
Popover on Click with Title
Use attribute title to add title to the Popover. Use data-trigger="focus" to create dismissable popovers.
Popover On Hover
To make your Popover open on hover, use data-trigger="hover".
Popover with Inline HTML
Use attribute data-html="true" to add inline HTML to the Popover.
Popover with External HTML
Use attribute data-id with value equals to id of the div with the HTML to be called to add external HTML to the Popover.
Contextual Popover
Use attribute data-color to create contextual popovers. For example: data-color="success" adds green color to the Popover..
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the Popover. The table lists the available classes and their effects.
| Propeller Classes | Effect | Remark |
|---|---|---|
.popover-html |
To load dynamic HTML inside Popover | Optional |
| HTML Attributes | Effect | Value |
|---|---|---|
data-toggle |
To initialize Popover | popover |
data-trigger |
Defines how the Popover opens. | hover, click, focus |
data-placement |
Defines the position of Popover vertically and horizontally. | left, right, top, bottom |
data-content |
Defines content of the Popover. | text, HTML |
data-html |
Required when your Popover contains HTML in it. | true, false |
data-id |
To load outer HTML | HTML element ID |
title |
Defines the title of Popover. | text |
data-color |
Used for colored Popover. | primary, default, success, danger, info, warning, secondary, dark, light |
Methods
See here for more documentation on this.
| Method | Description |
|---|---|
$().popover('show') |
Reveals an element’s popover. This is considered a “manual” triggering of the popover. |
$().popover('hide') |
Hides an element’s popover. This is considered a “manual” triggering of the popover. |
$().popover('toggle') |
Toggles an element’s popover. This is considered a “manual” triggering of the popover. |
$().popover('dispose') |
Hides and destroys an element’s popover. |
$().popover('enable') |
Gives an element’s popover the ability to be shown. Popovers are enabled by default. |
$().popover('disable') |
Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled. |
$().popover('toggleEnabled') |
Toggles the ability for an element’s popover to be shown or hidden. |
$().popover('update') |
Updates the position of an element’s popover. |
Events
See here for more documentation on this.
| Event Type | Description |
|---|---|
show.bs.popover |
This event fires immediately when the show instance method is called. |
shown.bs.popover |
This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.popover |
This event is fired immediately when the hide instance method has been called. |
hidden.bs.popover |
This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.bs.popover |
This event is fired after the show.bs.popover event when the Popover template has been added to the DOM. |