Demos#
Basic usage#
<Popover trigger={({ active, ...triggerProps }) => ( <Button icon="question" {...triggerProps} selected={active} /> )} title="Need help?" > Popover content that appears when the custom trigger button is toggled. </Popover>
Without close button#
<Popover hideCloseButton trigger={(triggerProps) => ( <Button text="More info" variant="secondary" {...triggerProps} /> )} title="More information" content={({ close }) => ( <Flex.Stack> <P> This popover hides the default close button. You can still close it programmatically by calling the provided helpers. </P> <Button text="Dismiss" variant="secondary" onClick={close} /> </Flex.Stack> )} />