Tooltips

  1. Elements
  2. Tooltips
Tooltip Directions

  {Tooltipdirtooltip.map((idx)=>(
<OverlayTrigger placement={idx.text} overlay={<Tooltip>Tooltip on {idx.text} </Tooltip>} key={Math.random()}>
<Button type="button" className="btn btn-primary btn-wave">
Tooltip on {idx.text}
</Button>
</OverlayTrigger>
))}
Colored Tooltips

  {Tooltipdirtooltip.map((idx)=>(
<OverlayTrigger placement={idx.text} overlay={<Tooltip>Tooltip on {idx.text} </Tooltip>} key={Math.random()}>
<Button type="button" className="btn btn-primary btn-wave">
Tooltip on {idx.text}
</Button>
</OverlayTrigger>
))}
Tooltips on links

Hover on the Link href view the Tooltip


  <p className="text-muted mb-0">
  Hover on the Link href view the
  <OverlayTrigger placement="top" overlay={<Tooltip className='tooltip-primary'>
  Link hrefoltip </Tooltip>}>
  <Link href="#" className="text-primary">Tooltip</Link>
       </OverlayTrigger> 
</p>
With an SVG's
<OverlayTrigger placement="top" overlay={
<Tooltip className="tooltip-secondary">Message </Tooltip>}>
<Link href="#"  className="me-3">
    <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="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 
2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/>
        </svg>
</Link>
</OverlayTrigger>
Disabled elements

  <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Default tooltip!</Tooltip>}>
  <span className="d-inline-block">
   <Button disabled style={{ pointerEvents: 'none' }}>
              Disabled button
        </Button>
     </span>
  </OverlayTrigger>
Tooltip For Images
imgimgimg

 <OverlayTrigger placement="top" overlay={<Tooltip className="tooltip-primary">
 Alex Carey</Tooltip>}>
 <Link href="#"
  className="avatar avatar-md me-2 online avatar-rounded">
         <img src={face12} alt="img"/>
     </Link>
 </OverlayTrigger>
 
 <OverlayTrigger placement="top" overlay={<Tooltip className="tooltip-primary">
 Marina Kai</Tooltip>}>
 <Link href="#"
  className="avatar avatar-lg me-2 online avatar-rounded">
         <img src={face3} alt="img"/>
     </Link>
 </OverlayTrigger>
 <OverlayTrigger placement="top" overlay={<Tooltip className="tooltip-primary">
 Tim Cook</Tooltip>}>
 <Link href="#"
  className="avatar avatar-xl me-2 online avatar-rounded">
         <img src={face15} alt="img"/>
     </Link>
 </OverlayTrigger>