Popovers and Tooltips

Clay Popovers (Doesn't use Bootstrap JS or Popper JS)

Clay Popover Top

<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>

Clay Popover Right

<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>

Clay Popover Bottom

<div class="clay-popover-bottom 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-bottom-left 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-bottom-right 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>

Clay Popover Left

<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>

Clay Tooltips (Doesn't use Bootstrap JS or Popper JS)

Clay Tooltip Right

<div class="fade tooltip clay-tooltip-right show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the right</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-right-top show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the right top</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-right-bottom show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the right bottom</div>
	</div>
</div>

Clay Tooltip Left

<div class="fade tooltip clay-tooltip-left show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the left</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-left-top show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the left top</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-left-bottom show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the left bottom</div>
	</div>
</div>

Clay Tooltip Bottom

<div class="fade tooltip clay-tooltip-bottom show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the bottom</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-bottom-left show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the bottom left</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-bottom-right show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the bottom right</div>
	</div>
</div>

Clay Tooltip Top

<div class="fade tooltip clay-tooltip-top show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the top</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-top-left show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the top left</div>
	</div>
</div>
<div class="fade tooltip clay-tooltip-top-right show" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
		<div>Tooltip on the top right</div>
	</div>
</div>