Tooltips

Link 

<a href="javascript:void(0);" class="btn btn-primary  mb-2 me-4 rounded bs-tooltip" title="Tooltip using ANCHOR tag">
    Link
</a>
<button type="button" class="btn btn-success  mb-2 me-4 rounded bs-tooltip" title="Tooltip using BUTTON tag">
    Button
</button>

HTML 


<button type="button" class="btn btn-dark rounded bs-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
    Tooltip with HTML
</button>

Placement

data-bs-placement="top"

data-bs-placement="right"

data-bs-placement="bottom"

data-bs-placement="left"


<div class="row">

    <div class="col-lg-6">

        <p class="mt-3"><code>data-bs-placement="top"</code></p>

        <button type="button" class="btn btn-info mb-4 rounded bs-tooltip" data-bs-placement="top" title="Tooltip on top">
            Tooltip on top
        </button>
    </div>
    <div class="col-lg-6">

        <p class="mt-3"><code>data-bs-placement="right"</code></p>

        <button type="button" class="btn btn-danger mb-4 rounded bs-tooltip" data-bs-placement="right" title="Tooltip on right">
            Tooltip on right
        </button>
    </div>
    <div class="col-lg-6">

        <p class="mt-3"><code>data-bs-placement="bottom"</code></p>

        <button type="button" class="btn btn-warning mb-4 rounded bs-tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
        </button>
    </div>
    <div class="col-lg-6">

        <p class="mt-3"><code>data-bs-placement="left"</code></p>

        <button type="button" class="btn btn-secondary mb-4 rounded bs-tooltip" data-bs-placement="left" title="Tooltip on left">
            Tooltip on left
        </button>
    </div>
    
</div>

Options

data-trigger="click"

Default

data-delay="1000"

data-animation="false"


<div class="row">
    <div class="col-lg-6 mb-4">
        <p class="mt-3"><code>data-trigger="click"</code></p>
        <button type="button" class="mt-1 btn btn-primary bs-tooltip mb-2 rounded" data-bs-trigger="click" title="On Click">
            On Click
        </button>
    </div>

    <div class="col-lg-6 mb-4">
        <p class="mt-3"><code>Default</code></p>
        <button type="button" class="mt-1 btn btn-secondary bs-tooltip mb-2 rounded" title="On Focus">
            On Focus
        </button>
    </div>

    <div class="col-lg-6 mb-4">
        <p class="mt-3"><code>data-delay="1000"</code></p>
        <button type="button" class="mt-1 btn btn-info bs-tooltip mb-2 rounded" data-bs-delay="1000" title="Delay 1s">
            Delay
        </button>
    </div>

    <div class="col-lg-6 mb-4">
        <p class="mt-3"><code>data-animation="false"</code></p>
        <button type="button" class="mt-1 btn btn-dark bs-tooltip mb-2 rounded" data-bs-animation="false" title="Disable Animation">
            Disabled Animation
        </button>
    </div>
</div>

Colors

Change tooltip template html as shown below to add color scheme.


<button type="button" class="btn btn-primary primary  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Primary </button>
<button type="button" class="btn btn-success success  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Success </button>
<button type="button" class="btn btn-info info  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Info </button>
<button type="button" class="btn btn-danger danger  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Danger </button>
<button type="button" class="btn btn-warning warning  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Warning </button>
<button type="button" class="btn btn-secondary secondary  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Secondary </button>
<button type="button" class="btn btn-dark tooltip-dark  mb-2 me-4 rounded" data-container="body" data-placement="top" data-html="true"> Dark </button>

Copyright © 2026 DesignReset, All rights reserved.

Coded with