Popover
Advanced tooltip for showing detailed content
Popover
Default
function PopoverDemo() { const [isOpen, setIsOpen] = React.useState(true); const position = 'top'; return ( <div style={{ minHeight: '300px', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', }} > <Popover launcher={({ ref }) => ( <Button ref={ref} onClick={() => { setIsOpen(!isOpen); }} > Open Popover </Button> )} isOpen={isOpen} onCloseClick={() => { setIsOpen(false); }} position={position} assistiveTitle="New feature" > <PopoverTitle>New Feature!</PopoverTitle> <PopoverBody>You can now estimate jobs from your settings.</PopoverBody> <ButtonRow> <PopoverPrimaryButton onClick={() => { console.log(`PopoverPrimaryButton: onClick`); }} > Next </PopoverPrimaryButton> <PopoverSecondaryButton onClick={() => { console.log(`PopoverSecondaryButton: onClick`); }} > Previous </PopoverSecondaryButton> </ButtonRow> </Popover> </div> ); }
Positioned below
function PopoverDemo() { const [isOpen, setIsOpen] = React.useState(true); const position = 'bottom'; return ( <div style={{ minHeight: '300px', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', }} > <Popover launcher={({ ref }) => ( <Button ref={ref} onClick={() => { setIsOpen(!isOpen); }} > Open Popover </Button> )} isOpen={isOpen} onCloseClick={() => { setIsOpen(false); }} position={position} assistiveTitle="New feature" > <PopoverTitle>New Feature!</PopoverTitle> <PopoverBody>You can now estimate jobs from your settings.</PopoverBody> <ButtonRow> <PopoverPrimaryButton onClick={() => { console.log(`PopoverPrimaryButton: onClick`); }} > Next </PopoverPrimaryButton> <PopoverSecondaryButton to="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> Learn more </PopoverSecondaryButton> </ButtonRow> </Popover> </div> ); }
Props
Popover
children
requiredContents for the Popover. Usually a
PopoverTitle
,PopoverBody
, andPopoverPrimaryButton
TypeReact.ReactNode
launcher
requiredA function that renders JSX and receives an object with
ref
. All of these props must be added to the component within the render prop.Type({ ref }: { ref: RefHandler }) => React.ReactNode
onCloseClick
requiredFunction called when the close button is clicked. You should cause this to set
isOpen=false
in your parent component.Type() => void
position
Position of popover relative to the launcher.
Type| 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end'
Default'top'
isOpen
Whether or not the popover is visible.
Typeboolean
Defaultfalse
container
By default popovers will render right before the
</body>
tag. Setting thecontainer
toinline
causes the tooltip to remain where it was added to the DOM. This option is helpful to work around z-index and positioning issues.Type'inline' | 'body'
Default'body'
accessibilityLabel
Accessibility title used to describe the content of the popover to screen readers.
Typestring
Default'Popover'
PopoverTitle
children
requiredThe contents of the title.
TypeReact.ReactNode
PopoverBody
children
requiredThe contents of the body.
TypeReact.ReactNode
PopoverPrimaryButton
children
requiredThe text of the button.
Typestring
onClick
requiredThe function to call when the button is clicked.
Type() => void
PopoverSecondaryButton
children
requiredThe text of the button.
Typestring
onClick
The function to call when the button is clicked.
Type() => void
to
Link to visit when the button is clicked. It will be opened in a new tab.
Typestring