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>
<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>
<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>