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 = []'[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'



Subscribe For Daily Updates