Popover
Popover is a component that floats around an element to display information.
Import
import {Popover,PopoverTrigger,PopoverAnchor,PopoverCloseButton,PopoverContent,PopoverHeader,PopoverBody,PopoverFooter,} from "@yamada-ui/react"
Popover: A wrapper component that controls the state of the popover.PopoverTrigger: A wrapper component that controls the reference element.PopoverAnchor: A wrapper component used when you want to reference an element other than thePopoverTriggerelement.PopoverCloseButton: A component for the button that closes the popover.PopoverContent: A component that displays the content of the popover.PopoverHeader: A component that displays the header of the popover.PopoverBody: A component that displays the main content of the popover.PopoverFooter: A component that displays the footer of the popover.
PopoverCloseButton can be omitted.
Usage
Set the element that the popover will reference (such as coordinates) in PopoverTrigger. Set the content in PopoverContent.
If the children of PopoverTrigger or PopoverAnchor are function components, please use forwardRef in the function component to receive the ref from PopoverTrigger or PopoverAnchor.
Editable example
<Popover> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> <PopoverFooter>第280話</PopoverFooter> </PopoverContent> </Popover>
Accessing Internal State
The children are provided with methods such as open and onClose. You can use these to access the internal state.
Editable example
<Popover> {({ open }) => ( <> <PopoverTrigger> <Button>{open ? "Close" : "Open"} Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> <PopoverFooter>第280話</PopoverFooter> </PopoverContent> </> )} </Popover>
Displaying Based on a Different Element
If you want to reference (such as coordinates) a different element than the PopoverTrigger element, use PopoverAnchor.
Editable example
<HStack> <Popover closeOnBlur={false}> <PopoverAnchor> <Text>Here display Popover</Text> </PopoverAnchor> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> <PopoverFooter>第280話</PopoverFooter> </PopoverContent> </Popover> </HStack>
Changing the Animation
To change the show or hide animation, set animation to top, left, etc. By default, scale is set.
Editable example
<Wrap gap="md"> <Popover animation="scale"> <PopoverTrigger> <Button>Open scale Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover animation="top"> <PopoverTrigger> <Button>Open top Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover animation="left"> <PopoverTrigger> <Button>Open left Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover animation="bottom"> <PopoverTrigger> <Button>Open bottom Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover animation="right"> <PopoverTrigger> <Button>Open right Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> </Wrap>
Changing the Placement
To change the placement, set placement to top, left-start, etc. By default, bottom is set.
Editable example
<Wrap gap="md"> <Popover placement="top"> <PopoverTrigger> <Button>Open top center Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="top-start"> <PopoverTrigger> <Button>Open top start Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="top-end"> <PopoverTrigger> <Button>Open top end Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="left"> <PopoverTrigger> <Button>Open left center Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="left-start"> <PopoverTrigger> <Button>Open left start Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="left-end"> <PopoverTrigger> <Button>Open left end Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="bottom"> <PopoverTrigger> <Button>Open bottom center Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="bottom-start"> <PopoverTrigger> <Button>Open bottom start Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="bottom-end"> <PopoverTrigger> <Button>Open bottom end Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="right"> <PopoverTrigger> <Button>Open right center Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="right-start"> <PopoverTrigger> <Button>Open right start Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover placement="right-end"> <PopoverTrigger> <Button>Open right end Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> </Wrap>
Changing the Duration
To change the duration, set duration to a number (seconds).
Editable example
<Popover duration={0.7}> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover>
Changing the Offset
Depending on the size of the element or the situation, you may want to adjust the position of the tooltip. In that case, adjust the position with gutter or offset.
gutter allows you to set a simple difference with the element, and offset allows you to set [horizontal axis, vertical axis].
Editable example
<HStack> <Popover gutter={32}> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> <Popover offset={[16, 16]}> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> </HStack>
Activating on Hover
By default, it becomes active when the PopoverTrigger element is clicked. If you want it to activate on hover, set trigger to hover.
Editable example
<Popover trigger="hover"> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover>
Delayed Rendering
By default, it is rendered in the DOM regardless of whether it is active. In other words, it is rendered but hidden by style.
If you want to delay rendering until it becomes active, set lazy to true.
Editable example
<Popover lazy> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover>
Disabling the Close Button
To disable (hide) the close button, set closeOnButton to false.
Editable example
<Popover closeOnButton={false}> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover>
Customizing the Close Button
If you want to customize the PopoverCloseButton by passing props, etc., set it without omitting.
Editable example
<Popover> <PopoverTrigger> <Button>Open Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverCloseButton color="red.500" /> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover>
Controlling
Editable example
const { open, onClose, onToggle } = useDisclosure() return ( <> <Button mr="md" onClick={onToggle}> Open Popover </Button> <Popover open={open} onClose={onClose} closeOnBlur={false}> <PopoverTrigger> <Button colorScheme="primary">Target Popover</Button> </PopoverTrigger> <PopoverContent> <PopoverHeader>ベジータ!</PopoverHeader> <PopoverBody>がんばれカカロット……お前がナンバー１だ！！</PopoverBody> </PopoverContent> </Popover> </> )
Edit this page on GitHub