Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Examples

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

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">
        Tooltip on {placement}
    </Button>
    </OverlayTrigger>
))}