FinderBuy now

Popovers

A pop-up box that appears when the user clicks/hovers on an element.

Bootstrap docs

Static popovers

Live demo

<!-- Popover on top -->
                  <button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Popover on top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Popover on top</button>

                  <!-- Popover on right -->
                  <button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover" title="Popover on right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Popover on right</button>

                  <!-- Popover on bottom -->
                  <button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" title="Popover on bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Popover on right</button>

                  <!-- Popover on left -->
                  <button type="button" class="btn btn-accent" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover" title="Popover on left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Popover on right</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" data-bs-placement="top" title="Popover on click" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">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" data-bs-placement="top" data-bs-trigger="hover" title="Popover on hover" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Toggle popover on hover</button
Top