Popover component
Popover is a small container with content that hovers over its parent
element. Since popovers are built on top of tooltip plugin, it is required to include
both of them. Popover supports all availbale tooltip options, but has a different
template - title, content and arrow. It supports four alignment options:
top, right, bottom and left. The
popover plugin generates content and markup on demand, and by default places tooltips
after their trigger element.
Top popover data-bs-placement="top"
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare lacinia.
Right popover data-bs-placement="end"
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare lacinia.
Bottom popover data-bs-placement="bottom"
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare lacinia.
Left popover data-bs-placement="start"
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare lacinia.
| Popover positions | ||
|---|---|---|
| Left position | Popover in left direction. To use, add
data-bs-placement="left" to the popover element. |
|
| Top position | Popover in top direction. To use, add
data-bs-placement="top" to the popover element. |
|
| Right position | Popover in default right direction,
data-bs-placement="right" is optional. |
|
| Bottom position | Popover in bottom direction. To use, add
data-bs-placement="bottom" to the popover element. |
|
| Auto position | When auto is specified, it will dynamically reorient the
popover. |
|
| Popover options | ||
| Hover trigger | Use the hover trigger to show popover when the user's cursor
enters the element and dismiss when leaves. |
|
| Focus trigger | Use the focus trigger to dismiss popovers on the user’s next
click of a different element than the toggle element. |
|
| HTML support | Insert HTML into the popover. If false, innerText property will
be used to insert content into the DOM. Use text if you're worried about XSS
attacks. |
|
| Disabled animation | Add or remove a CSS fade transition to the popover by setting
data-animation to true (default) or
false. |
|
| Delayed popover | Delay showing and hiding the popover (ms) - does not apply to
manual trigger type. If a number is supplied, delay is applied
to both hide/show. |
|
| No title | If title attribute is not specified, popover will display only
body text. |
|
| Custom header color | Popovers support custom title color styling through
template option. To use, add custom color class to
.popover|.popover-arrow|,popover-header elements. |
|
| Custom solid color | Besides title, popovers also support a solid color fill option.
To use, add custom color class to
.popover|.popover-arrow|.popover-header elements. |
|
| Popover events | ||
| Show event | Example of a show event. This event fires immediately when the
show instance method is called. |
|
| Shown event | Example of a shown event. This event is fired when the popover
has been made visible to the user. |
|
| Hide event | Example of a hide event. This event is fired immediately when
the hide instance method has been called. |
|
| Hidden event | Example of a hidden event. This event is fired when the popover
has finished being hidden from the user. |
|
| Popover methods | ||
| Show method |
|
Example of a show method. This method reveals an element's
popover. Popovers whose both title and content are zero-length are never
displayed. |
| Hide method |
|
Example of a hide method. This method hides an element's
popover. Hover on Target button and then click
play button to hide a popover. |
| Toggle method |
|
Example of a toggle method. This method toggles an element's
popover. Click on play button to toggle Target
button popover. |
| Dispose method |
|
Example of a dispose method. This method hides and disposes an
element's popover. Click on Target button and then
play button to dispose a popover. |
| Enable/Disable methods |
|
Example of a toggleEnabled method. Toggles the ability for an
element’s popover to be shown or hidden. Hover on Target button
and then play button to disable and enable a popover |
