Popover
View in LexiconPopovers contain helpful information such as an explanation of a context.
install | yarn add @clayui/popover |
---|---|
version | |
use | import Popover from '@clayui/popover'; |
Table of Contents
Example
import {Provider} from '@clayui/core'; import Popover from '@clayui/popover'; import React from 'react'; export default function App() { return ( <Provider spritemap="/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
"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>> | nullContributors
Last edited May 9, 2025 at 6:15:38 AM
Table of Contents