Tooltips

Documentation and examples for adding custom Bootstrap tooltips. A tooltip component for a more stylish alternative to that anchor tag title attribute.

Examples

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. You can pass the Overlay injected props directly to the Tooltip component.

{['top', 'right', 'bottom', 'left'].map((placement) => (
<OverlayTrigger
key={placement}
placement={placement}
overlay={
<Tooltip id={`tooltip-${placement}`}>
Tooltip on <strong>{placement}</strong>.
</Tooltip>
}
>
<Button variant="secondary" className="me-1 mb-2 mb-lg-0">Tooltip on {placement}</Button>
</OverlayTrigger>
))}

Made by Codescandy

Destributed by ThemeWagon