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,6"
data-bs-placement="right"
data-bs-html="true"
title="<i class='icon-base bx bx-trending-up icon-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,6"
data-bs-placement="top"
data-bs-html="true"
title="<i class='icon-base bx bx-bell icon-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,6"
data-bs-placement="bottom"
data-bs-html="true"
title="<i class='icon-base bx bx-heart icon-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,6"
data-bs-placement="left"
data-bs-html="true"
title="<i class='icon-base bx bx-dollar icon-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,8" 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,8" 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,8" 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,8" 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,8" 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,8" 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,8" 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 |
@each $state in map-keys($theme-colors) {
.tooltip.tooltip-#{$state}, .tooltip-#{$state} > .tooltip {
--#{$prefix}tooltip-bg: var(--#{$prefix}#{$state});
--#{$prefix}tooltip-color: var(--#{$prefix}#{$state}-contrast);
}
}