Unlimited Access

Upgrade your plan from a Free trial, to select ‘Business Plan’. Start Now

Upgrade Now

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>