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 |
