Image
Buy Now
avatar
dash ui - admin dashboard template
Unlimited Access

Upgrade your plan from a Free trial, to select Business Plan. Start Now

Upgrade Now

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