Tooltips & Popovers

Tooltips

Ex.

<OverlayTrigger placement="top" overlay={<Tooltip id="button-tooltip-2">Top Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Top</Link>
</OverlayTrigger>

<OverlayTrigger placement="left" overlay={<Tooltip id="button-tooltip-2">Left Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Left</Link>
</OverlayTrigger>

<OverlayTrigger placement="bottom" overlay={<Tooltip id="button-tooltip-2">Bottom Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Bottom</Link>
</OverlayTrigger>

<OverlayTrigger placement="right" overlay={<Tooltip id="button-tooltip-2">Right Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Right</Link>
</OverlayTrigger>

Popovers

Ex.

<OverlayTrigger placement="top" trigger="click" overlay={<Tooltip id="button-tooltip-2">Top Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Top</Link>
</OverlayTrigger>

<OverlayTrigger placement="left" trigger="click" overlay={<Tooltip id="button-tooltip-2">Left Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Left</Link>
</OverlayTrigger>

<OverlayTrigger placement="bottom" trigger="click" overlay={<Tooltip id="button-tooltip-2">Bottom Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Bottom</Link>
</OverlayTrigger>

<OverlayTrigger placement="right" trigger="click" overlay={<Tooltip id="button-tooltip-2">Right Tooltip</Tooltip>}>
   <Link href="#" className="btn btn-primary me-2 mt-2">Right</Link>
</OverlayTrigger>