Reactstrap Popovers

Bootstrap popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user. For example, you can think about those from iOS’s devices. Now keep reading some examples to see how Bootstrap popovers work.

Example

import React from "react";

// reactstrap components
import { Button, PopoverBody, UncontrolledPopover } from "reactstrap";

function Example() {
  return (
    <>
      <Button
        className=" mt-2"
        color="default"
        id="popover644119284"
        type="button"
      >
        Popover on top
      </Button>
      <UncontrolledPopover placement="top" target="popover644119284">
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button
        className=" mt-2"
        color="default"
        id="popover281198417"
        type="button"
      >
        Popover on right
      </Button>
      <UncontrolledPopover placement="right" target="popover281198417">
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button
        className=" mt-2"
        color="default"
        id="popover73472958"
        type="button"
      >
        Popover on bottom
      </Button>
      <UncontrolledPopover placement="bottom" target="popover73472958">
        <PopoverBody>
          Vivamussagittis lacus vel augue laoreet rutrum faucibus.
        </PopoverBody>
      </UncontrolledPopover>
      <Button
        className=" mt-2"
        color="default"
        id="popover997738441"
        type="button"
      >
        Popover on left
      </Button>
      <UncontrolledPopover placement="left" target="popover997738441">
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
    </>
  );
}

export default Example;

Variations

import React from "react";

// reactstrap components
import { Button, PopoverBody, UncontrolledPopover } from "reactstrap";

function Example() {
  return (
    <>
      <Button color="default" id="popover-default" type="button">
        Default popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-default"
        placement="top"
        target="popover-default"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button color="primary" id="popover-primary" type="button">
        Primary popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-primary"
        placement="top"
        target="popover-primary"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button color="secondary" id="popover-secondary" type="button">
        Secondary popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-secondary"
        placement="top"
        target="popover-secondary"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button color="info" id="popover-info" type="button">
        Info popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-info"
        placement="top"
        target="popover-info"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button color="success" id="popover-success" type="button">
        Success popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-success"
        placement="top"
        target="popover-success"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button color="danger" id="popover-danger" type="button">
        Danger popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-danger"
        placement="top"
        target="popover-danger"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
      <Button color="warning" id="popover-warning" type="button">
        Warning popover
      </Button>
      <UncontrolledPopover
        popperClassName="popover-warning"
        placement="top"
        target="popover-warning"
      >
        <PopoverBody>
          This is a very beautiful popover, show some love.
        </PopoverBody>
      </UncontrolledPopover>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.