Popover

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Default Popovers

<OverlayTrigger trigger="click" placement="right" overlay={
<Popover id="popover-basic">
<Popover.Header as="h3">Popover title</Popover.Header>
<Popover.Body>
And here's some amazing content. It's very engaging. Right?
</Popover.Body>
</Popover>
}>
<Button variant="danger">Click to toggle popover</Button>
</OverlayTrigger>

Four directions

Four options are available: top, right, bottom, and left aligned.

{['top', 'right', 'bottom', 'left'].map((placement) => (
<OverlayTrigger
trigger="click"
key={placement}
placement={placement}
overlay={
<Popover id={`popover-positioned-${placement}`}>
<Popover.Header as="h3">{`Popover ${placement}`}</Popover.Header>
<Popover.Body>
<strong>Holy guacamole!</strong> Check this info.
</Popover.Body>
</Popover>
}
>
<Button variant="secondary" className="me-2 mb-2 mb-lg-0">Popover on {placement}</Button>
</OverlayTrigger>
))}

Dismiss on next click

Use the trigger="focus" trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

<OverlayTrigger trigger="focus" placement="right" overlay={
<Popover id="popover-basic">
<Popover.Header as="h3">Popover title</Popover.Header>
<Popover.Body>
And here's some amazing content. It's very engaging. Right?
</Popover.Body>
</Popover>
}>
<Button variant="danger">Dismissible popover</Button>
</OverlayTrigger>