Popover

View in Lexicon

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

install	yarn add @clayui/popover
version
use	import Popover from '@clayui/popover';

Position

Top

<div className="clay-popover-top fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover top</div>
		<div className="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 className="clay-popover-top-left fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover top left</div>
		<div className="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 className="clay-popover-top-right fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover top right</div>
		<div className="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 className="clay-popover-right fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover right</div>
		<div className="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 className="clay-popover-right-top fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover right top</div>
		<div className="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 className="clay-popover-right-bottom fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover right bottom</div>
		<div className="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 className="clay-popover-bottom fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover right bottom</div>
		<div className="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 className="clay-popover-bottom-left fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover right bottom left</div>
		<div className="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 className="clay-popover-bottom-right fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover right bottom right</div>
		<div className="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 className="clay-popover-left fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover left</div>
		<div className="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 className="clay-popover-left-top fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover left top</div>
		<div className="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 className="clay-popover-left-bottom fade popover show">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">Popover left bottom</div>
		<div className="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>

Widths

Popover Width Large

A wider popover for more content.

<div className="clay-popover-right-top fade popover popover-width-lg">
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">
			<div className="autofit-row autofit-row-center">
				<div className="autofit-col autofit-col-expand">
					<div className="autofit-section">Popover Header</div>
				</div>
				<div className="autofit-col">
					<button className="close" type="button">
						<svg
							className="lexicon-icon lexicon-icon-times"
							focusable="false"
							role="presentation"
						>
							<use xlink:href="/images/icons/icons.svg#times" />
						</svg>
					</button>
				</div>
			</div>
		</div>
		<div className="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>

Popover Width Sass API

The map $popover-widths allows generating any number of popover widths. If a key starts with ., #, or % Clay will output it as is, otherwise we will prepend . to the key (e.g., .popover-width-lg). This doesn’t generate a Sass placeholder.

$popover-widths: (
	popover-width-lg: (
		max-width: 421px
	),
	'%popover-width-xl': (
		max-width: 560px
	),
	'.popover-width-xl': (
		extend: '%popover-width-xl'
	),
	'.popover-width-xxl': (
		max-width: 1000px
	)
);

Outputs:

.popover-width-xl {
	max-width: 421px;
}

.popover-width-xl {
	max-width: 560px;
}

.popover-width-xxl {
	max-width: 1000px;
}

Variants

Popover Secondary

A different style of popover with a blue box shadow and no header divider.

<div
	className="clay-popover-right-top popover popover-secondary popover-width-lg"
>
	<div className="arrow"></div>
	<div className="inline-scroller">
		<div className="popover-header">
			<div className="autofit-row autofit-row-center">
				<div className="autofit-col autofit-col-expand">
					<div className="autofit-section">
						Step 1 of 3: Customize Logo
					</div>
				</div>
				<div className="autofit-col">
					<button className="close" type="button">
						<svg
							className="lexicon-icon lexicon-icon-times"
							focusable="false"
							role="presentation"
						>
							<use xlink:href="/images/icons/icons.svg#times" />
						</svg>
					</button>
				</div>
			</div>
		</div>
		<div className="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>

Popover Variant Sass API

The map $popovers allows generating any number of popover variants. If a key starts with ., #, or % Clay will output it as is, otherwise we will prepend . to the key (e.g., .my-popover-secondary). This doesn’t generate a Sass placeholder.

$popovers: (
	my-popover-secondary: (
		background-color: #eee,
		popover-header: (
			background-color: inherit
		)
	),
	'%popover-dark': (
		background-color: #000,
		color: #fff,
		popover-header: (
			background-color: inherit,
			color: inherit
		),
		popover-body: (
			color: inherit
		)
	),
	'.popover-dark': (
		extend: '%popover-dark'
	)
);

Outputs:

.my-popover-secondary {
	background-color: #eee;
}

.my-popover-secondary .popover-header {
	background-color: inherit;
}

.popover-dark {
	background-color: #000;
	color: #fff;
}

.popover-dark .popover-header {
	background-color: inherit;
	color: inherit;
}

.popover-dark .popover-body {
	color: inherit;
}