Popover

See React Bootstrap/Popover for full documentation and props.

A PopoverTrigger or Overlay component should be used to correctly position this component.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <PopoverTrigger show={show} onToggle={setShow} overlay={ <Popover> <Popover.Header>Header</Popover.Header> <Popover.Body>Body</Popover.Body> <Popover.Footer> <Button onClick={() => setShow(false)} variant="outline-secondary"> Cancel </Button> <Button>Submit</Button> </Popover.Footer> </Popover> } > <Button>Trigger</Button> </PopoverTrigger> ); }

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <PopoverTrigger
      show={show}
      onToggle={setShow}
      overlay={
        <Popover>
          <Popover.Header>Header</Popover.Header>
          <Popover.Body>Body</Popover.Body>
          <Popover.Footer>
            <Button onClick={() => setShow(false)} variant="outline-secondary">
              Cancel
            </Button>
            <Button>Submit</Button>
          </Popover.Footer>
        </Popover>
      }
    >
      <Button>Trigger</Button>
    </PopoverTrigger>
  );
}

Without footers

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}> {['top', 'right', 'bottom', 'left'].map((placement) => ( <PopoverTrigger placement={placement} key={placement} overlay={ <Popover> <Popover.Header>Header</Popover.Header> <Popover.Body>Body</Popover.Body> </Popover> } > <Button>Trigger {placement}</Button> </PopoverTrigger> ))} </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
  {['top', 'right', 'bottom', 'left'].map((placement) => (
    <PopoverTrigger
      placement={placement}
      key={placement}
      overlay={
        <Popover>
          <Popover.Header>Header</Popover.Header>
          <Popover.Body>Body</Popover.Body>
        </Popover>
      }
    >
      <Button>Trigger {placement}</Button>
    </PopoverTrigger>
  ))}
</div>

Header

Result

Loading...

Live Editor

<div style={{ display: 'flex', justifyContent: 'space-between' }}> <PopoverTrigger placement="bottom" overlay={ <Popover> <Popover.Header showCloseBtn={false}> <div className="me-2"> <Popover.Icon> <span className="icon-face-smile" /> </Popover.Icon> </div> <h5 className="mb-0 mt-1">This is a Popover</h5> </Popover.Header> <Popover.Body>Body</Popover.Body> <Popover.Footer> <Button variant="outline-secondary">Cancel</Button> <Button>Submit</Button> </Popover.Footer> </Popover> } > <Button>With Icon</Button> </PopoverTrigger> <PopoverTrigger placement="bottom" overlay={ <Popover> <Popover.Header> <h5 className="mb-0 mt-1">This is a Popover</h5> </Popover.Header> <Popover.Body>Body</Popover.Body> <Popover.Footer> <Button variant="outline-secondary">Cancel</Button> <Button>Submit</Button> </Popover.Footer> </Popover> } > <Button>With Close Button</Button> </PopoverTrigger> <PopoverTrigger placement="bottom" overlay={ <Popover> <Popover.Header> <div className="me-2"> <Popover.Icon> <span className="icon-face-smile" /> </Popover.Icon> </div> <h5 className="mb-0 mt-1">This is a Popover</h5> </Popover.Header> <Popover.Body>Body</Popover.Body> <Popover.Footer> <Button variant="outline-secondary">Cancel</Button> <Button>Submit</Button> </Popover.Footer> </Popover> } > <Button>With Icon and Close Button</Button> </PopoverTrigger> </div>

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  <PopoverTrigger
    placement="bottom"
    overlay={
      <Popover>
        <Popover.Header showCloseBtn={false}>
          <div className="me-2">
            <Popover.Icon>
              <span className="icon-face-smile" />
            </Popover.Icon>
          </div>
          <h5 className="mb-0 mt-1">This is a Popover</h5>
        </Popover.Header>
        <Popover.Body>Body</Popover.Body>
        <Popover.Footer>
          <Button variant="outline-secondary">Cancel</Button>
          <Button>Submit</Button>
        </Popover.Footer>
      </Popover>
    }
  >
    <Button>With Icon</Button>
  </PopoverTrigger>
  <PopoverTrigger
    placement="bottom"
    overlay={
      <Popover>
        <Popover.Header>
          <h5 className="mb-0 mt-1">This is a Popover</h5>
        </Popover.Header>
        <Popover.Body>Body</Popover.Body>
        <Popover.Footer>
          <Button variant="outline-secondary">Cancel</Button>
          <Button>Submit</Button>
        </Popover.Footer>
      </Popover>
    }
  >
    <Button>With Close Button</Button>
  </PopoverTrigger>
  <PopoverTrigger
    placement="bottom"
    overlay={
      <Popover>
        <Popover.Header>
          <div className="me-2">
            <Popover.Icon>
              <span className="icon-face-smile" />
            </Popover.Icon>
          </div>
          <h5 className="mb-0 mt-1">This is a Popover</h5>
        </Popover.Header>
        <Popover.Body>Body</Popover.Body>
        <Popover.Footer>
          <Button variant="outline-secondary">Cancel</Button>
          <Button>Submit</Button>
        </Popover.Footer>
      </Popover>
    }
  >
    <Button>With Icon and Close Button</Button>
  </PopoverTrigger>
</div>

Fullscreen and mobile breakpoints

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}> {[true, false, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'].map((fullscreen) => ( <PopoverTrigger key={fullscreen} overlay={ <Popover fullscreen={fullscreen}> <Popover.Header>Header</Popover.Header> <Popover.Body>Body</Popover.Body> <Popover.Footer> <Button variant="outline-secondary">Cancel</Button> <Button>Submit</Button> </Popover.Footer> </Popover> } > <Button>Fullscreen = {fullscreen}</Button> </PopoverTrigger> ))} </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
  {[true, false, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'].map((fullscreen) => (
    <PopoverTrigger
      key={fullscreen}
      overlay={
        <Popover fullscreen={fullscreen}>
          <Popover.Header>Header</Popover.Header>
          <Popover.Body>Body</Popover.Body>
          <Popover.Footer>
            <Button variant="outline-secondary">Cancel</Button>
            <Button>Submit</Button>
          </Popover.Footer>
        </Popover>
      }
    >
      <Button>Fullscreen = {fullscreen}</Button>
    </PopoverTrigger>
  ))}
</div>

Props

Popover

PopoverTrigger