Popovers & Tooltips
Four options are available: top, right, bottom, left. Directions are mirrored when using Bootstrap in RTL. Set to data-bs-placement="" to change the direction.
Example Popover
You must initialize popovers before they can be used.
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
<OverlayTrigger
trigger="click"
placement="right"
overlay={
<Popover>
<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="secondary">Popover on top</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
<OverlayTrigger
overlay={
<Tooltip id="tooltip-disabled">Disabled Tooltip</Tooltip>
}
>
<span className="d-inline-block">
<Button disabled style={{ pointerEvents: 'none' }}>
Disabled button
</Button>
</span>
</OverlayTrigger>
Popovers directions
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
<OverlayTrigger
trigger="click"
placement="top"
overlay={
<Popover>
<Popover.Body>Top popover</Popover.Body>
</Popover>
}
>
<Button variant="secondary">Popover on top</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
<OverlayTrigger
trigger="click"
placement="right"
overlay={
<Popover>
<Popover.Body>Right popover</Popover.Body>
</Popover>
}
>
<Button variant="secondary">Popover on right</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
<OverlayTrigger
trigger="click"
placement="bottom"
overlay={
<Popover>
<Popover.Body>Bottom popover</Popover.Body>
</Popover>
}
>
<Button variant="secondary">Popover on bottom</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
<OverlayTrigger
trigger="click"
placement="left"
overlay={
<Popover>
<Popover.Body>Left popover</Popover.Body>
</Popover>
}
>
<Button variant="secondary">Popover on left</Button>
</OverlayTrigger>
Tooltip Example
Follow the following code base
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
<OverlayTrigger
placement="top"
overlay={<Tooltip>Tooltip on top</Tooltip>}
>
<Button variant="primary">Tooltip on top</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
<OverlayTrigger
placement="right"
overlay={<Tooltip>Tooltip on right</Tooltip>}
>
<Button variant="primary">Tooltip on right</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
<OverlayTrigger
placement="bottom"
overlay={<Tooltip>Tooltip on bottom</Tooltip>}
>
<Button variant="primary">Tooltip on bottom</Button>
</OverlayTrigger>
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
<OverlayTrigger
placement="left"
overlay={<Tooltip>Tooltip on left</Tooltip>}
>
<Button variant="primary">Tooltip on left</Button>
</OverlayTrigger>