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
Right popover data-bs-placement="end"
Popover right
Bottom popover data-bs-placement="bottom"
Popover bottom
Left popover data-bs-placement="start"
Popover left
| 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
|
