Bootstrap Popovers
Bootstrap popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user. For example, you can think about those from iOS’s devices. Now keep reading some examples to see how Bootstrap popovers work.
Example
Popover on top
Popover on right
Popover on bottom
Popover on left
<button type= "button" class= "btn btn-secondary" data-container= "body" data-bs-toggle= "popover" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Popover on top
</button>
<button type= "button" class= "btn btn-secondary" data-container= "body" data-bs-toggle= "popover" data-bs-placement= "right" data-bs-content= "This is a very beautiful popover, show some love." >
Popover on right
</button>
<button type= "button" class= "btn btn-secondary" data-container= "body" data-bs-toggle= "popover" data-bs-placement= "bottom" data-bs-content= "Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." >
Popover on bottom
</button>
<button type= "button" class= "btn btn-secondary" data-container= "body" data-bs-toggle= "popover" data-bs-placement= "left" data-bs-content= "This is a very beautiful popover, show some love." >
Popover on left
</button>
Variations
Primary popover
Secondary popover
Info popover
Success popover
Danger popover
Warning popover
Light popover
Dark popover
<button type= "button" class= "btn bg-gradient-primary" data-container= "body" data-bs-toggle= "popover" data-color= "primary" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Primary popover
</button>
<button type= "button" class= "btn bg-gradient-secondary" data-container= "body" data-bs-toggle= "popover" data-color= "secondary" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Secondary popover
</button>
<button type= "button" class= "btn bg-gradient-info" data-container= "body" data-bs-toggle= "popover" data-color= "info" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Info popover
</button>
<button type= "button" class= "btn bg-gradient-success" data-container= "body" data-bs-toggle= "popover" data-color= "success" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Success popover
</button>
<button type= "button" class= "btn bg-gradient-danger" data-container= "body" data-bs-toggle= "popover" data-color= "danger" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Danger popover
</button>
<button type= "button" class= "btn bg-gradient-warning" data-container= "body" data-bs-toggle= "popover" data-color= "warning" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Warning popover
</button>
<button type= "button" class= "btn bg-gradient-light" data-container= "body" data-bs-toggle= "popover" data-color= "light" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Light popover
</button>
<button type= "button" class= "btn bg-gradient-dark" data-container= "body" data-bs-toggle= "popover" data-color= "dark" data-bs-placement= "top" data-bs-content= "This is a very beautiful popover, show some love." >
Dark popover
</button>