Popover

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

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

Table of Contents

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>
	);
}

API Reference

Popover

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>
Parameters
Properties

alignPosition

"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | undefined

Position in which the tooltip will be aligned to the element.

closeOnClickOutside

boolean | undefined

Flag to indicate if the popover should be closed when clicking outside, only works if used with trigger

containerProps

any

Props to add to the <ClayPortal/>.

defaultShow

boolean | undefined

Sets the default value of show (uncontrolled).

disableScroll

boolean | undefined

Flag to indicate if container should not be scrollable

displayType

string | undefined

Appends the type to popover-

show

boolean | undefined

Flag to indicate if tooltip is displayed (controlled).

onOffset

((points: Point) => [number, number]) | undefined

Callback for setting the offset of the popover from the trigger.

onShowChange

any

Callback for when the show prop changes (controlled).

size

"lg" | undefined

Sets the size of the popover.

trigger

(React.ReactElement<any, string | React.JSXElementConstructor<any>> & Omit<React.RefAttributes<HTMLButtonElement>, "key">) | undefined

React element that the popover will align to when clicked.

header

React.ReactNode

Content to display in the header of the popover.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Table of Contents