Popover

yarn add @clayui/popover

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

React Component
CSS / Markup

import ClayPopover from '@clayui/popover';

import ClayPopover from '@clayui/popover';

const Component = () => (
  <div style={{ height: 250 }}>
    <ClayPopover
      alignPosition="bottom"
      disableScroll={false}
      header="Popover Header!"
    >
      {`Single shot, café au lait aromatic body robusta body cream mocha viennese steamed aged. Irish roast, aromatic seasonal, caramelization grinder french press coffee cortado lungo skinny.

			Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.`}
    </ClayPopover>
  </div>
);

render(<Component />);

const Component = () => (
  <div style={{ height: 250 }}>
    <ClayPopover
      alignPosition="bottom"
      disableScroll={false}
      header="Popover Header!"
    >
      {`Single shot, café au lait aromatic body robusta body cream mocha viennese steamed aged. Irish roast, aromatic seasonal, caramelization grinder french press coffee cortado lungo skinny.
			Viennese flavour cup eu, percolator froth ristretto mazagran caffeine. White roast seasonal, mocha trifecta, dripper caffeine spoon acerbic to go macchiato strong.`}
    </ClayPopover>
  </div>
);
render(<Component />);

API

Property	Type	Required	Default	Description
alignPosition	typeof ALIGN_POSITIONS[number]	false	'bottom'	Position in which the tooltip will be aligned to the element.
disableScroll	boolean	false	false	Flag to indicate if container should not be scrollable
show	boolean	false	false	Flag to indicate if tooltip is displayed.
onShowChange	(val: boolean) => void	false		Callback for when the `show` prop changes.
trigger	React.ReactElement & { ref?: (node: HTMLButtonElement \| null) => void; }	false		React element that the popover will align to when clicked.
header	React.ReactNode	false		Content to display in the header of the popover.

Position
- Top
- Right
- Bottom
- Left

Position

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>

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>

Bottom

<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

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