Bootstrap CSS Classes

« All Bootstrap CSS classes

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

Are you tired of writing HTML by hand?

CSS 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;
    }
  }
}

More Bootstrap CSS classes in Tooltips category

.tooltip
Shuffle Editor

An online editor for busy developers.

Shuffle Editor on Facebook Shuffle Editor on Twitter Shuffle Editor on Dribbble

Products

UI Components

Support

Company

© 2024 Shuffle. All rights reserved.