Popover

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

installyarn add @clayui/popover
versionNPM Version
useimport Popover from '@clayui/popover';

Example

import {Provider} from '@clayui/core';
import Popover from '@clayui/popover';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4" style={{height: 250}}>
				<Popover
					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.
				</Popover>
			</div>
		</Provider>
	);
}

Table of Contents