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.

Design

Code

{['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>
))}