Documentation v8.0.28

Preview Purchase

Overview

Metronic customizes the Bootstrap Tooltips  through the SASS variables in src/sass/_variables.scssand custom SASS code in src/sass/_tooltips.scss. Bootstrap Tooltips are globally initialized by src/js/layout/app.jswrapper script via data attribute data-bs-toggle="tooltip". .

Basic Example

Use data-bs-toggle="tooltip"HTML attribute to initialize a tooltip by passing any of available options as explained in Tooltip Options.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
    Tooltip on right
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
    Tooltip on left
</button>

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

Dimiss Options

Use custom data-bs-dimiss="click"HTML attribute to dismiss a tooltip on click.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-dismiss="click" title="Example tooltip">
    Dismissable tooltip
</button>

Delay Options

Use custom data-bs-delay-showand data-bs-delay-hideHTML attributes to initialize a tooltip with showing and hiding delay(ms).
<button type="button" class="btn btn-secondary my-2 me-5" data-bs-toggle="tooltip" data-bs-toggle="tooltip" data-bs-delay-show="1000" data-bs-placement="top" title="Example tooltip">
    Show delay: 1000ms
</button>

<button type="button" class="btn btn-secondary my-2 me-5" data-bs-toggle="tooltip" data-bs-toggle="tooltip" data-bs-delay-hide="1000" data-bs-placement="top" title="Example tooltip">
    Hide delay: 1000ms
</button>

Explore Metronic

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single end product with paying users.
$ 939
Custom License
Reach us for custom license offers.
Buy Now

Metronic Demos

demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon