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>
Placement
data-bs-placement="top"
data-bs-placement="right"
data-bs-placement="bottom"
data-bs-placement="left"
<!-- TOP -->
<button type="button" class="btn btn-info mb-4 rounded bs-tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<!-- RIGHT -->
<button type="button" class="btn btn-danger mb-4 rounded bs-tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<!-- BOTTOM -->
<button type="button" class="btn btn-warning mb-4 rounded bs-tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<!-- LEFT -->
<button type="button" class="btn btn-secondary mb-4 rounded bs-tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</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>
Options
data-trigger="click"
Default
data-delay="1000"
data-animation="false"
<!-- On Click -->
<button type="button" class="mt-1 btn btn-primary bs-tooltip mb-4 rounded" data-bs-trigger="click" title="On Click">
On Click
</button>
<!-- On Focus -->
<button type="button" class="mt-1 btn btn-secondary bs-tooltip mb-4 rounded" title="On Focus">
On Focus
</button>
<!-- Delay -->
<button type="button" class="mt-1 btn btn-info bs-tooltip mb-4 rounded" data-bs-delay="1000" title="Delay 1s">
Delay
</button>
<!-- Disabled Animation -->
<button type="button" class="mt-1 btn btn-dark bs-tooltip mb-4 rounded" data-bs-animation="false" title="Disable Animation">
Disabled Animation
</button>
Colors
Change tooltip template html as shown below to add color scheme.
<!-- Primary -->
<button type="button" class="btn btn-primary primary mb-2 me-4" data-container="body" data-placement="top" data-html="true"> Primary </button>
$('.primary').tooltip({
template: '<div class="tooltip tooltip-primary" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
title: "Primary"
});
Copyright © 2022 DesignReset, All rights reserved.
Coded with