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.
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.
Use attribute title
to add title to the Popover. Use data-trigger="focus"
to create dismissable popovers.
To make your Popover open on hover, use data-trigger="hover"
.
Use attribute data-html="true"
to add inline HTML to the Popover.
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.
Use attribute data-color
to create contextual popovers. For example: data-color="success" adds green color to the Popover..
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 |
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. |
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. |