Popover

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.