text: import React, {Component} from 'react';
  import {
    Row,
    Col,
    Card,
    CardHeader,
    CardBody,
    Button, Popover, PopoverHeader, PopoverBody
  } from 'reactstrap';
  
  class PopoverItem extends Component {
    constructor(props) {
      super(props);
  
      this.toggle = this.toggle.bind(this);
      this.state = {
        popoverOpen: false
      };
    }
  
    toggle() {
      this.setState({
        popoverOpen: !this.state.popoverOpen
      });
    }
  
    render() {
      return (
        <span>
          <Button className="mr-1" color="secondary" id={'Popover-' + this.props.id} onClick={this.toggle}>
            {this.props.item.text}
          </Button>
          <Popover placement={this.props.item.placement} isOpen={this.state.popoverOpen} target={'Popover-' + this.props.id} toggle={this.toggle}>
            <PopoverHeader>Popover Title</PopoverHeader>
            <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
          </Popover>
        </span>
      );
    }
  }
  
  class Popovers extends Component {
  
    constructor(props) {
      super(props);
  
      this.toggle = this.toggle.bind(this);
      this.state = {
        popoverOpen: false,
        popovers: [
          {
            placement: 'top',
            text: 'Top'
          },
          {
            placement: 'bottom',
            text: 'Bottom'
          },
          {
            placement: 'left',
            text: 'Left'
          },
          {
            placement: 'right',
            text: 'Right'
          }
        ]
      };
    }
  
    toggle() {
      this.setState({
        popoverOpen: !this.state.popoverOpen
      });
    }
  
    render() {
      return (
        <div className="animated fadeIn">
          <Card>
            <CardHeader>
              <i className="fa fa-align-justify"></i><strong>Popovers</strong>
              <div className="card-actions">
                <a href="https://reactstrap.github.io/components/popovers/" target="_blank">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <Button id="Popover1" onClick={this.toggle}>
                Launch Popover
              </Button>
              <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
                <PopoverHeader>Popover Title</PopoverHeader>
                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
              </Popover>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              <i className="fa fa-align-justify"></i><strong>Popovers</strong>
              <small> list</small>
            </CardHeader>
            <CardBody>
              { this.state.popovers.map((popover, i) => {
                return <PopoverItem key={i} item={popover} id={i} />;
              })}
            </CardBody>
          </Card>
        </div>
      );
    }
  }
  
  export default Popovers;