PhilBranding Phillip Mudavanhu UX Designer Logo Designer Buy now

Popovers

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

Bootstrap docs

Static popovers

Live images

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

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

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

<!-- Popover on left -->
<button type="button" class="btn btn-translucent-primary" data-container="body" data-toggle="popover" data-placement="left" data-trigger="hover" title="Popover on left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Popover on right</button>
// Popover on top
button(type="button", class="btn btn-translucent-primary", data-container="body", data-toggle="popover", data-placement="top", data-trigger="hover", title="Popover on top", data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.")
  | Popover on top

// Popover on right
button(type="button", class="btn btn-translucent-primary", data-container="body", data-toggle="popover", data-placement="right", data-trigger="hover", title="Popover on right", data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.")
  | Popover on right

// Popover on bottom
button(type="button", class="btn btn-translucent-primary", data-container="body", data-toggle="popover", data-placement="bottom", data-trigger="hover", title="Popover on bottom", data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.")
  | Popover on bottom

// Popover on left
button(type="button", class="btn btn-translucent-primary", data-container="body", data-toggle="popover", data-placement="left", data-trigger="hover", title="Popover on left", data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.")
  | Popover on left

Toggle on click / hover

<!-- Toggle popover on click (click is default trigger) -->
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" title="Popover on click" data-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-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Popover on hover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.">Toggle popover on hover</button>
// Toggle popover on click (click is default trigger)
button(type="button", class="btn btn-primary", data-container="body", data-toggle="popover", data-placement="top", title="Popover on click", data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.")
  | Toggle popover on click

// Toggle popover on hover
button(type="button", class="btn btn-outline-primary", data-container="body", data-toggle="popover", data-placement="right", data-trigger="hover", title="Popover on hover", data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.")
  | Toggle popover on hover
Top