Tooltip

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.

Directions

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-placement="right" title="Tooltip on right">
                  Right
                </button>
                
                <!-- Tooltip on top -->
                <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
                  Top
                </button>
                
                <!-- Tooltip on bottom -->
                <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
                  Bottom
                </button>
                
                <!-- Tooltip on left -->
                <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
                  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:

<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>

Solid

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-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-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-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-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-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-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-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