Documentation
Popovers
Things to know about the React-Boostrap Overlay components.
Overview
- Overlays rely on the third-party library Popper.js. It's included automatically with React-Bootstrap, but you should reference the API for more advanced use cases.
- The
<Tooltip>and<Popover>components do not position themselves. Instead the<Overlay>(or<OverlayTrigger>) components, injectrefandstyleprops. - Tooltip expects specific props injected by the
<Overlay>component - Tooltips for
disabledelements must be triggered on a wrapper element.
const popover = (
<Popover id="popover-basic">
<Popover.Header as="h3">Popover right</Popover.Header>
<Popover.Body>
And here's some <strong>amazing</strong> content. It's very engaging.
right?
</Popover.Body>
</Popover>
);
const Example = () => (
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
<Button variant="success">Click me to see</Button>
</OverlayTrigger>
);
render(<Example />);Four directions
Four options are available: top, right, bottom, and left aligned.
As with <Tooltip>s, you can control the placement of the Popover.
{['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">Popover on {placement}</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 overlay from a wrapper <div> or <span> and override the pointer-events on the disabled element.
<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>
<span className="d-inline-block">
<Button disabled style={{ pointerEvents: 'none' }}>
Disabled button
</Button>
</span>
</OverlayTrigger>