import { NextPage } from "next";
import {
  Button,
  Col,
  Container,
  OverlayTrigger,
  Popover,
} from "react-bootstrap";

const popover = (
  <Popover id="mypop">
    <Popover.Header as="h3">Right Popover</Popover.Header>
    <Popover.Body>My Something special.</Popover.Body>
  </Popover>
);

const Test: NextPage = () => {
  return (
    <Container>
      <Col>
        <h3 className="display-3">Hello</h3>
        <OverlayTrigger trigger="click" placement="right" overlay={popover}>
          <Button variant="primary">Click to see.</Button>
        </OverlayTrigger>
      </Col>
    </Container>
  );
};

export default Test;