This chapter will discuss about popovers in Bootstrap. A popover typically contains additional information, context, or actions related to the triggering element.
The popover may contain text, images, links, buttons, or other content, depending on its purpose and context. Bootstrap provides built-in popover components that can be easily integrated into web applications.
Things to remember while using the popover plug-in:
As popovers depend on Popper.js, a third party library, for positioning, you must include popper.min.js before bootstrap.js.
As a dependency, the popovers require the popover plugin.
You must initialize the popovers first, as popovers are opt-in for performance reasons.
A popover will never be shown for a zero-length title and content values.
Triggering popovers will not work on hidden elements.
Popovers for .disabled or disabled elements must be triggered using a wrapper element.
To avoid getting popovers centered between the anchors’ overall width, use white-space: nowrap; on the <a>
Before removing any element from the DOM, you must hide the popovers corresponding to them.
Enable Popovers
Initialize all the popovers on a page, by their data-bs-toggle attribute
data-bs-toggle="popover" data-bs-placement="top"
data-bs-title="Popover"
data-bs-content="It is a new popover.">
Click to view popover
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Positioning of a Popover
There are four options available for the positioning of the popover: left, right, top and bottom aligned.
By default, the popover will appear on the right of the element.
The data-bs-placement attribute is used to set the position of the popover.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_position.php
Example
Let's see an example of setting the position of a popover:
You can edit and try running this code using the Edit & Run option.
Popover on top
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Custom popovers
The appearance of popovers can be customized using a custom class data-bs-custom-class="custom-popover".https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_custom.php
Example
Let's see an example of creating a custom popover:
You can edit and try running this code using the Edit & Run option.
data-bs-toggle="popover" data-bs-placement="top"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="It is a custom popover.">
Custom popover
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Dismissible Popover
The popover gets closed when the same element is clicked again, by default. However, the attribute data-bs-trigger="focus" can be used, which will close the popover when clicking outside the element.
For the popover to be dismissed on the next click, it is necessary to use specific HTML code that ensures consistent behavior across different browsers and platforms
When the mouse pointer is moved over an element and you want a popover to appear on hovering, use the data-bs-trigger="hover" attribute.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_hover.php
Example
Let's see an example of a hovering popover:
You can edit and try running this code using the Edit & Run option.
For popovers on disabled elements, you may prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_disabled.php
Example
Let's see an example of a popover on disabled element:
You can edit and try running this code using the Edit & Run option.
An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".
By default, its 'clippingParents' and can accept an HTML Element reference (via JavaScript only).
container
string, element, false
false
Appends the popover to a specific element.
customClass
string, function
''
These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
delay
number, object
0
Delay showing and hiding the popover(ms). Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacements
array
['top', 'right', 'bottom', 'left']
Define fallback placements by providing a list of placements in array.
html
boolean
false
Allow HTML in the popover.
offset
array, string, function
[0, 0]
Offset of the popover relative to its target. Ex: data-bs-offset="10,20".
placement
string, function
'top'
Decides the position of the popover.
popperConfig
null, object, function
null
To change Bootstraps default Popper config.
sanitize
boolean
true
Enable or disable the sanitization.
sanitizeFn
null, function
null
You can supply your own sanitize function.
selector
string, false
false
With a selector, popover objects will be delegated to the specified targets.
template
string
''
While creating a popover, use the base HTML.
title
string, element, function
''
It refers to the title of the popover.
trigger
string
'hover-focus'
Shows how the popover is triggered: click, hover, focus, manual.
Leave a Reply