Buy now
Popovers
A pop-up box that appears when the user clicks/hovers on an element.
Static popovers
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem.
Live demo
<!-- Popover on top -->
<button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" placement="top" data-bs-trigger="hover" title="Popover on top" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem." popoverTitle="Popover on top">Popover on top</button>
<!-- Popover on right -->
<button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" placement="right" data-bs-trigger="hover" title="Popover on right" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem." popoverTitle="Popover on right">Popover on right</button>
<!-- Popover on bottom -->
<button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" placement="bottom" data-bs-trigger="hover" title="Popover on bottom" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem." popoverTitle="Popover on bottom">Popover on bottom</button>
<!-- Popover on left -->
<button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" placement="left" data-bs-trigger="hover" title="Popover on left" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."popoverTitle="Popover on left">Popover on left</button>Toggle on click / hover
<!-- Toggle popover on click (click is default trigger) -->
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" placement="top" title="Popover on click"ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem." popoverTitle="Toggle popover on click">Toggle popover on click</button>
<!-- Toggle popover on hover -->
<button type="button" class="btn btn-outline-primary" data-bs-container="body" data-bs-toggle="popover" placement="top" data-bs-trigger="hover" title="Popover on hover" ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem." popoverTitle="Toggle popover on hover">Toggle popover on hover</button>