Tooltips
Link
<a href="#" data-bs-toggle="tooltip" title="Tooltip on top">Tooltip for link</a><a href="#" data-bs-toggle="tooltip" title="Tooltip on top">Tooltip for link</a>
Button
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on top">Tooltip for button</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on top">Tooltip for button</button>
Custom HTML
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="<strong>Tooltip</strong> <small>with</small> <span class='badge bg-primary'>custom</span> <em>HTML</em>" data-bs-html="true">Tooltip with custom HTML</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="<strong>Tooltip</strong> <small>with</small> <span class='badge bg-primary'>custom</span> <em>HTML</em>" data-bs-html="true">Tooltip with custom HTML</button>
Position
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on top" data-bs-placement="top">Tooltip on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on right" data-bs-placement="right">Tooltip on right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on bottom" data-bs-placement="bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on left" data-bs-placement="left">Tooltip on left</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on top" data-bs-placement="top">Tooltip on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on right" data-bs-placement="right">Tooltip on right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on bottom" data-bs-placement="bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on left" data-bs-placement="left">Tooltip on left</button>
Animation
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip without animation" data-bs-animation="false">Tooltip without animation</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip without animation" data-bs-animation="false">Tooltip without animation</button>
Delay
Tooltip with delay in ms for showing and hiding
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip with delay" data-bs-delay="500">Tooltip with delay</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip with delay" data-bs-delay="500">Tooltip with delay</button>
Trigger type
Tooltip triggered by click only
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Triggered by click" data-bs-trigger="click">Trigger by click</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Triggered by click" data-bs-trigger="click">Trigger by click</button>
Disabled elements
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip for disabled element">
<button type="button" class="btn btn-secondary" disabled="" style="pointer-events: none;">Tooltip for disabled element</button>
</span><span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip for disabled element">
<button type="button" class="btn btn-secondary" disabled="" style="pointer-events: none;">Tooltip for disabled element</button>
</span>