Popover

yarn add @clayui/popover

Popovers contain helpful information such as an explanation of a context.

Position
- Top
- Right
- Bottom
- Left

Position

Top

Code Sample (expand to see it)

<div class="clay-popover-top fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover top</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-top-left fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover top left</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-top-right fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover top right</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>

Right

Code Sample (expand to see it)

<div class="clay-popover-right fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover right</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-right-top fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover right top</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-right-bottom fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover right bottom</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>

Bottom

Code Sample (expand to see it)

<div class="clay-popover-bottom fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover right bottom</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-bottom-left fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover right bottom left</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-bottom-right fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover right bottom right</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>

Left

Code Sample (expand to see it)

<div class="clay-popover-left fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover left</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-left-top fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover left top</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>
<div class="clay-popover-left-bottom fade popover show">
	<div class="arrow"></div>
	<div class="inline-scroller">
		<div class="popover-header">Popover left bottom</div>
		<div class="popover-body">
			Viennese flavour cup eu, percolator froth ristretto mazagran
			caffeine. White roast seasonal, mocha trifecta, dripper caffeine
			spoon acerbic to go macchiato strong.
		</div>
	</div>
</div>