<div class="container">
  <p>Hover over the button to see the tooltip</p>
  <p>
    <button type="button" class="btn btn-primary tabula-tooltip" data-title="Here's my tooltip content">Hey, you!</button>
  </p>
</div>

//== Tooltips
//
//##

//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: 0.9;

//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

@zindex-tooltip: 1070;

@border-radius-base: 0px;

@font-size-base:          14px;
@font-size-small:         ceil((@font-size-base * .85)); // ~12px

@font-family-base: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@line-height-base: 1.6;

.reset-text() {
  font-family: @font-family-base;
  // We deliberately do NOT reset font-size.
  font-style: normal;
  font-weight: 400;
  line-height: @line-height-base;
  line-break: auto;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
}

// Wrapper for the tooltip content
.tooltip-inner() {
  max-width: @tooltip-max-width;
  padding: 3px 8px;
  color: @tooltip-color;
  text-align: center;
  background-color: @tooltip-bg;
  border-radius: @border-radius-base;
}

.tabula-tooltip[data-title]:not([data-title=""]) {
  position: relative;
  display: inline-block;

  &::before,
  &::after {
    position: absolute;
    display: block;
    top: -@tooltip-arrow-width;
    left: 50%;
    z-index: @zindex-tooltip;
    opacity: 0;
    transition: opacity 0.15s linear;
  }

  &::before {
    content: "";
    transform: translateX(-50%);
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0
      @tooltip-arrow-width;
    border-style: solid;
    border-color: @tooltip-bg transparent transparent transparent;
  }

  &::after {
    content: attr(data-title);
    transform: translateX(-50%) translateY(-100%);

    // 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.
    .reset-text();
    font-size: @font-size-small;

    .tooltip-inner();
    min-width: 150px;

    pointer-events: none;
  }

  &:hover {
    &::before,
    &::after {
      opacity: @tooltip-opacity;
    }
  }
}