Popoversv5.x

Popovers provide ancillary information on demand

Bootstrap v5.x | Popovers


Add sample text

Add sample text Clear




Small alt-dismiss popover









---- Large popover --------
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover Title"
   data-bs-content="This is a large popover on a large-sized button. Click the button again to dismiss.">Large
   Popover</button>
---- Standard popover --------
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-title="Popover Title"
   data-bs-content="This is a standard popover on a standard-sized button. Click the button again to dismiss.">Standard
   Popover</button>
---- Small alt-dismiss popover --------
<a tabindex="0" class="btn btn-sm btn-success" role="button" data-bs-toggle="popover" data-bs-trigger="focus"
   data-bs-title="Dismissible popover"
   data-bs-content="This popover is dismissible with any next click anywhere OTHER THAN the button.">Small
   Alt-dismiss
   popover</a>
</button>
---- Customized Popover --------
<button type="button" class="btn btn-primary custom-popover" data-bs-toggle="popover" data-bs-placement="right"
   data-bs-custom-class="custom-popover" data-bs-title="Customized Popover"
   data-bs-content="This popover's background, border and other attributes are customizable.">
   Custom popover
</button><br><br>
---- Popovers in different directions --------
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover"
   data-bs-placement="top" data-bs-content="Top popover">
   Popover top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover"
   data-bs-placement="right" data-bs-content="Right popover">
   Popover right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover"
   data-bs-placement="left" data-bs-content="Left popover">
   Popover left
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover"
   data-bs-placement="bottom" data-bs-content="Bottom popover">
   Popover bottom
</button>

Custom CSS

Custom CSS is required if you wish to style the popover. The following CSS variables are provided in the Bootstrap libraries.

.custom-popover {
   --bs-popover-arrow-height: value;
   --bs-popover-arrow-margin: value;
   --bs-popover-arrow-width: value;
   --bs-popover-bg: value;
   --bs-popover-body-color: value;
   --bs-popover-body-padding-x: value;
   --bs-popover-body-padding-y: value;
   --bs-popover-border-color: value;
   --bs-popover-border-radius: value;
   --bs-popover-border-width: value;
   --bs-popover-box-shadow: value;
   --bs-popover-font-size: value;
   --bs-popover-header-bg: value;
   --bs-popover-header-color: value;
   --bs-popover-header-font-size: value;
   --bs-popover-header-padding-x: value;
   --bs-popover-header-padding-y: value;
   --bs-popover-max-width: value;
}
   

This will reset the page. Are you sure?