{Defaultalerts.map((idx)=>(
<OverlayTrigger trigger="click" placement={idx.class}  key={Math.random()}
overlay={<Popover>
<Popover.Header as="h3"> Popover {idx.text}</Popover.Header>
<Popover.Body>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</Popover.Body>
</Popover>}>
<Button variant='' href="#" className="btn btn-outline-primary btn-wave">Popover {idx.text}</Button>
</OverlayTrigger>))}

<OverlayTrigger trigger="click" placement={idx.class}  key={Math.random()}
  overlay={<Popover>
<Popover.Header as="h3" data-bs-custom-classname="header-primary"> Color Header</Popover.Header>
     <Popover.Body>
     Popover with primary header.
   </Popover.Body>
      </Popover>}>
<Button variant={idx.color} href="#"  className="btn btn-wave">Header {idx.text}</Button>
 </OverlayTrigger> ))}

<OverlayTrigger placement="top trigger="click" overlay={<Popover className="popover-primary">
 <Popover.Header as="h3">Color Background</Popover.Header>
<Popover.Body>Popover with primary background.</Popover.Body>
</Popover>}>
 <Button variant="primary">Primary </Button>
</OverlayTrigger>

<OverlayTrigger placement="top trigger="click" overlay={<Popover className="popover-primary-light">
 <Popover.Header as="h3">Light Background</Popover.Header>
<Popover.Body>Popover with light primary background.</Popover.Body>
</Popover>}>
 <Button variant="primary-light">Primary </Button>
</OverlayTrigger>

{Dismissiblealerts.map((idx)=>(
    <OverlayTrigger trigger="click" placement={idx.class}  key={Math.random()}
    autoclose='true' 
overlay={<Popover>
<Popover.Header as="h3"> Dismissible Popover</Popover.Header>
   <Popover.Body>
   And here's some amazing content. It's very engaging. Right?
 </Popover.Body>
    </Popover>}>
<Button variant={idx.color}   className="btn  btn-wave">Popover Dismiss</Button>
</OverlayTrigger>))}

<OverlayTrigger placement='right' 
overlay={<Popover id="tooltip-disabled">
<Popover.Body>Disabled Popover!</Popover.Body>
</Popover>}>
     <span className="d-inline-block">
<Button disabled style={{ pointerEvents: 'none' }}>
         Disabled button
       </Button>
     </span>
</OverlayTrigger>   

<OverlayTrigger placement='top' trigger="click" overlay={<Popover className='popover-primary' id="tooltip-disabled">
<Popover.Body>This popover is used to provide details about this icon.</Popover.Body>
</Popover>}>
<Link className="me-4" to="#">
<svg xmlns="http://www.w3.org/2000/svg" 
className="svg-primary" height="24px"
 viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 
2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2
 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
 </svg>

</Link>
</OverlayTrigger>
<OverlayTrigger placement='left' trigger="click" 
overlay={<Popover className='popover-secondary' id="tooltip-disabled">
<Popover.Body>This popover is used to provide details about this icon.</Popover.Body>
</Popover>}>
<Link className="me-4" to="#" >

<svg xmlns="http://www.w3.org/2000/svg" className="svg-secondary" 
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 
4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 
18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

</Link>
</OverlayTrigger>