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

API Reference

Popover

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

alignPosition

"left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "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

IPortalBaseProps | undefined

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

InternalDispatch<boolean> | undefined

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
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko, Diego Nascimento

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents