brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Popover

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Basic examples

Four directions are available: Top, Right, Bottom and Left. For adding popovers read official documentation of bootstrap.

														
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Click to Toggle
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on top
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on right
</button>

<button type="button" class="btn btn-secondary" data-bs-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-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	Popover on left
</button>
Name Values description
data-bs-toggle="popover" data-bs-placement="[value]" top / right / bottom / left Actives the toggle functionality
Disabled elements

Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

														
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
	<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Dismiss on next clicks

Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element.

														
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
	<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
Jump to