Bootstrap’s Popover component can be added as a plugin to display particular content. But the popovers depend upon a popper library and can be added in Bootsrap to use only with the help of bootstrap.bundle.min.js / bootstrap.bundle.js. It is dependent upon the tooltip plugin to add popovers.
To trigger popovers, it must be added within a DOM element of Html. For disabling or hiding any element, the particular popover is added and triggered. Overall the web pages, popovers can be added using a data-bs-toggle attribute.
For example,
var triggerPopoverlist = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var listForPopover= triggerPopoverlist .map(function (popover TriggerCon1) { return new bootstrap.Popover(popoverTriggerCon1) }) |
Additionally, popovers can be enclosed inside a container in several types that indicates various directions like left, right, bottom, left.
For Example,
When popover is enclosed inside the container
var popoverContainer = new bootstrap.Popover(document.querySelector('.example-popoverContainer'), { container: 'body' }) |