React Bootstrap docs

Popovers

A pop-up box that appears when the user clicks/hovers on an element.

Static examples

Live demo

import Stack from 'react-bootstrap/Stack'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Button from 'react-bootstrap/Button'
import Popover from 'react-bootstrap/Popover'
import PopoverHeader from 'react-bootstrap/PopoverHeader'
import PopoverBody from 'react-bootstrap/PopoverBody'

export default function PopoversLiveDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={
            <Popover id={`popover-positioned-${placement}`}>
              <PopoverHeader as="h3">{`Popover ${placement}`}</PopoverHeader>
              <PopoverBody>And here&apos;s some amazing content. It&apos;s very engaging. Right?</PopoverBody>
            </Popover>
          }
        >
          <Button variant="outline-secondary me-1 mb-1">Popover on {placement}</Button>
        </OverlayTrigger>
      ))}
    </Stack>
  )
}

Toggle options

import Stack from 'react-bootstrap/Stack'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Button from 'react-bootstrap/Button'
import Popover from 'react-bootstrap/Popover'
import PopoverHeader from 'react-bootstrap/PopoverHeader'
import PopoverBody from 'react-bootstrap/PopoverBody'

export default function PopoversToggleOptionsDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      {(['click', 'hover', 'focus'] as const).map((trigger) => (
        <OverlayTrigger
          key={trigger}
          trigger={trigger === 'hover' ? ['hover', 'focus'] : trigger}
          placement="top"
          overlay={
            <Popover id={`popover-on-${trigger}`}>
              <PopoverHeader as="h3">{`Popover on ${trigger}`}</PopoverHeader>
              <PopoverBody>And here&apos;s some amazing content. It&apos;s very engaging. Right?</PopoverBody>
            </Popover>
          }
        >
          <Button variant="outline-secondary me-1 mb-1">Popover on {trigger}</Button>
        </OverlayTrigger>
      ))}
    </Stack>
  )
}
Top