Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations
and
data-attributes for local title storage.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
<!-- Tooltip on right -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="right" data-bs-html="true" title="<i class='bx bx-trending-up bx-xs' ></i> <span>Tooltip on right</span>">
Right
</button>
<!-- Tooltip on top -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-html="true" title="<i class='bx bx-bell bx-xs' ></i> <span>Tooltip on top</span>">
Top
</button>
<!-- Tooltip on bottom -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="bottom" data-bs-html="true" title="<i class='bx bx-heart bx-xs' ></i> <span>Tooltip on bottom</span>">
Bottom
</button>
<!-- Tooltip on left -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="left" data-bs-html="true" title="<i class='bx bx-dollar bx-xs' ></i> <span>Tooltip on left</span>">
Left
</button>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl);
});
Attribute | Value |
---|---|
data-bs-placement="{value}"
|
top | right | bottom | left |
And with custom HTML added:
Create tooltip with with solid variant by using data-bs-custom-class="tooltip-{value}"
attribute.
<!-- Primary -->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-primary" title="Primary tooltip">
Primary
</button>
<!-- Secondary -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-secondary" title="Secondary tooltip">
Secondary
</button>
<!-- Success -->
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-success" title="Success tooltip">
Success
</button>
<!-- Danger -->
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-danger" title="Danger tooltip">
Danger
</button>
<!-- Warning -->
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-warning" title="Warning tooltip">
Warning
</button>
<!-- Info -->
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-info" title="Info tooltip">
Info
</button>
<!-- Dark -->
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-offset="0,4" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="Dark tooltip">
Dark
</button>
Attribute | Value |
---|---|
data-bs-custom-class="tooltip-{value}"
|
primary | secondary | success | danger | warning | info | dark |