Developed by Codescandy

Popovers

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.Body>
            Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus.
        </Popover.Body>
        </Popover>
    }
    >
    <Button variant="secondary" className="me-2 mb-1">
        Popover on {placement}
    </Button>
    </OverlayTrigger>
))}

Dismiss on next click

Use the 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">
    Dismissible popover
    </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>

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span> , ideally made keyboard-focusable using tabindex="0" .

For disabled popover triggers, you may also prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect toclickon a disabled element.

<OverlayTrigger
    placement="right"
    overlay={
    <Popover>
        <Popover.Body>Disabled popover</Popover.Body>
    </Popover>
    }
>
    <span className="d-inline-block">
    <Button
        variant="primary"
        disabled
        style={{ pointerEvents: "none" }}
    >
        Disabled button
    </Button>
    </span>
</OverlayTrigger>
Contents