Tooltip and Popover

<div className="bg-light p-3 border br-3">
<Row className="text-center">
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="top" overlay={<Tooltip >Tooltip on top</Tooltip>}><Button className="ms-1" variant="primary">Hover me</Button></OverlayTrigger>
  </Col>

  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="bottom" overlay={<Tooltip >Tooltip on bottom</Tooltip>}><Button className="ms-1" variant="primary">Hover me</Button></OverlayTrigger>

  </Col>
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="left" overlay={<Tooltip >Tooltip on left</Tooltip>}><Button className="ms-1" variant="primary">Hover me</Button></OverlayTrigger>

  </Col>
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="right" overlay={<Tooltip >Tooltip on right</Tooltip>}><Button className="ms-1" variant="primary">Hover me</Button></OverlayTrigger>

  </Col>
</Row>
</div>

<div className="bg-light p-3 border br-3">
<Row className="text-center">
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="top" overlay={<Tooltip className="tooltip-primary" >Tooltip on top</Tooltip>}><Button className="ms-1" variant="primary">Hover me</Button></OverlayTrigger>
  </Col>
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="bottom" overlay={<Tooltip className="tooltip-secondary" >Tooltip on bottom</Tooltip>}><Button className="ms-1" variant="secondary">Hover me</Button></OverlayTrigger>
  </Col>
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="left" overlay={<Tooltip className="tooltip-danger" >Tooltip on left</Tooltip>}><Button className="ms-1" variant="danger">Hover me</Button></OverlayTrigger>
  </Col>
  <Col sm={6} lg={3} className="mt-2 mb-2">
    <OverlayTrigger placement="right" overlay={<Tooltip className="tooltip-info" >Tooltip on right</Tooltip>}><Button className="ms-1" variant="info">Hover me</Button></OverlayTrigger>
  </Col>
</Row>
</div>

  export function DefaultpopOver() {
    return (
      <>
        {popoverData.map((item:any, k:any) => (
          <Col sm={6} lg={3} className="mt-2 mb-2" key={k}>
          <OverlayTrigger
            trigger="click"
            
            placement={item.placement}
            overlay={
              <Popover id={popover-positioned-{item.placement}} style={{ margin: "0px" }}>
                <Popover.Header as="h3">{Popover {item.placement}}</Popover.Header>
                <Popover.Body>
                Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                </Popover.Body>
              </Popover>
            }
          >
            <Button variant={item.variant}>Click me</Button>
          </OverlayTrigger>
            </Col>
        ))}
      </>
    );
  }

export function StaticTooltip() {
  

  return (
    <>
    {StaticTooltipData.map((item:any, k:any) => (
      <Col sm={6} lg={3} className="mt-2 mb-2 text-center" key={k}>
      <OverlayTrigger
        trigger="click"
        placement={item.placement}
        overlay={
          <Popover id={popover-positioned-{item.placement}} style={{ margin "0px" }}>
            <Popover.Header className={item.classname} as="h3">{Popover {item.placement}}</Popover.Header>
            <Popover.Body>
            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </Popover.Body>
          </Popover>
        }
      >
        <Button variant={item.variant}>Click me</Button>
      </OverlayTrigger>
        </Col>
    ))}
  </>
  );
}

export function ColoredTooltip() {
  
  return (
    <>
    {ColoredTooltipData.map((item:any, k:any) => (
      <Col  sm={6} lg={3} className="mt-2 mb-2" key={k}>
      <OverlayTrigger
        trigger="click"
        placement={item.placement}
        overlay={
          <Popover className={item.popoverclass} id={popover-positioned-{item.placement}} style={{ margin: "0px" }}>
            <Popover.Body className="text-white">
              <h4 className={item.popheaderclass} >{Popover {item.placement}}</h4>
            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            </Popover.Body>
          </Popover>
        }
      >
        <Button variant={item.variant}>Click me</Button>
      </OverlayTrigger>
        </Col>
    ))}
  </>
  );
}