is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← all Bootstrap classes list

Bootstrap class: .tooltip

<!-- Note: A custom script is used to activate tooltips:

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
-->
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="top" title="Tooltip on top"> Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="right" title="Tooltip on right"> Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="left" title="Tooltip on left"> Tooltip on left
</button>

Preview

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _tooltip.scss:2 */
.tooltip {
  position: absolute;
  z-index: $zindex-tooltip;
  display: block;
  margin: $tooltip-margin;
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  @include reset-text();
  font-size: $tooltip-font-size;
  // Allow breaking very long words so they don't overflow the tooltip's bounds
  word-wrap: break-word;
  opacity: 0;

  &.show { opacity: $tooltip-opacity; }

  .arrow {
    position: absolute;
    display: block;
    width: $tooltip-arrow-width;
    height: $tooltip-arrow-height;

    &::before {
      position: absolute;
      content: "";
      border-color: transparent;
      border-style: solid;
    }
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _tooltip.scss:2 */
$zindex-tooltip
$tooltip-margin
$tooltip-font-size
$tooltip-opacity
$tooltip-arrow-width
$tooltip-arrow-height
Bootstrap 4 & 5