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'

})

 

Subscribe For Daily Updates