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.

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:

Preview
HTML

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

Create tooltip with with solid variant by using data-bs-custom-class="tooltip-{value}" attribute.

Preview
HTML

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

Tooltip

Directions

Solid