MaterialPro Template by WrapPixel

Tooltip & Popover

Custom Bootstrap tooltips with CSS and JavaScript using CSS3.

Interactive demo - Tooltip

Code Here:


<div class="button-group">
    <button type="button" class="me-2 btn btn-light-info text-info font-medium" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
    </button>
    <button type="button" class="me-2 btn btn-light-primary text-primary font-medium" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
    Tooltip on right
    </button>
    <button type="button" class="me-2 btn btn-light-success text-success font-medium" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
    </button>
    <button type="button" class="me-2 btn btn-light-danger text-danger font-medium" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
    Tooltip on left
    </button>
</div>

Interactive demo - Popover

Code Here


<div class="button-group">
    <button type="button" class="me-2 btn btn-light-info text-info font-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
    </button>
    <button type="button" class="me-2 btn btn-light-primary text-primary font-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
    </button>
    <button type="button" class="me-2 btn btn-light-success text-success font-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
    </button>
    <button type="button" class="me-2 btn btn-light-danger text-danger font-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
    </button>
</div>