Logo
hummingbird

Tooltip

Hover over the buttons below to see the four tooltips directions top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

Basic Example

HTML

<button type="button" class="btn btn-subtle-neutral" data-bs-toggle="tooltip" data-bs-title="Tooltip">Tooltip</button>
Directions

HTML

<button type="button" class="btn btn-subtle-neutral" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-subtle-neutral" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-subtle-neutral" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-subtle-neutral" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
Custom Tooltip

HTML

<button type="button" class="btn btn-subtle-neutral" data-bs-toggle="tooltip" data-bs-title="Custom Tooltip" data-bs-custom-class="custom-tooltip">Custom Tooltip</button>
Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex=“0”.

HTML

<span class='inline-block' tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled >Disabled button</button>
</span>