Popover

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

Default Popovers

Design
Code
<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.

Design
Code
{['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.

Design
Code
<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>
Buy Now