Popover
Popovers contain helpful information such as an explanation of a context.
install | yarn add @clayui/popover |
---|
version | |
---|
use | import 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>
);
}
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
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-
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.
Callback for when the show
prop changes (controlled).
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.
Content to display in the header of the popover.
Returns
ReactElement<any, string | JSXElementConstructor<any>> | null