YouTipBootstrap5 Popover
# Bootstrap5 Popover
The popover component is similar to tooltips; it is shown when the user clicks on an element. The difference is that the popover can contain much more content.
* * *
## How to Create a Popover
Create a popover by adding the `data-bs-toggle="popover"` attribute to an element.
The `title` attribute contains the popover's header text, and the `data-bs-content` attribute contains the popover's body text:
**Note:** Popovers must be initialized with JavaScript.
The following example initializes all popovers on the page:
## Example
var popoverTriggerList = [].slice.call(document.querySelectorAll(''))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
[Try it Yourself »](#)
* * *
## Specify Popover Position
By default, the popover is displayed on the right side of the element.
Use the `data-bs-placement` attribute to set the direction of the popover: top, bottom, left, or right:
## Example
Top
Bottom
Left
Right
[Try it Yourself »](#)
* * *
## Close the Popover
By default, the popover is closed when you click on the element again. You can use the `data-bs-trigger="focus"` attribute to close the popover when clicking outside the element:
## Example
Dismissible popover
[Try it Yourself »](#)
**Tip:** If you want to show the popover on mouse hover, use the `data-bs-trigger` attribute with the value `"hover"`:
## Example
Hover over me
[Try it Yourself »](#)
[](#)(#)
(#)[](#)
[Volcengine Coding Plan supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, etc., officially supplied and reliable. Configuration Guide ¥9.9/month Subscribe Now](https://maas.xfyun.cn/modelSquare?ch=maas_lm_l2E)
### Share Notes