_tooltip.scss

.tooltip-item {
  $tooltip-background: transparentize($dark-gray, 0.1);
  $tooltip-color: white;
  $tooltip-width: 10em;

  border: 1px solid $base-border-color;
  padding: .5em 1em;
  border-radius: $base-border-radius;
  position: relative;
  margin-bottom: $base-line-height;

  &:hover .tooltip {
    opacity: 1;
    visibility: visible;
  }

  .tooltip {
    @include position(absolute, 0 0 0 50%);
    @include box-sizing(border-box);
    @include transition (all 0.2s ease-in-out);
    bottom: 130%;
    background-color: $tooltip-background;
    border-radius: $base-border-radius;
    color: $tooltip-color;
    font-size: .9em; // Make sure you use -webkit-backface-visibility: hidden; on the body element to prevent 1px nudging bugs.
    line-height: 1.5em;
    margin-left: -($tooltip-width/2);
    opacity: 0;
    padding: .5em 0;
    text-align: center;
    visibility: hidden;
    min-width: $tooltip-width;
    z-index: 10;

    p {
      margin-bottom: 0;
    }

    &:after {
      @include size(0);
      @include position(absolute, 0 0 0 $tooltip-width/2);
      border: 8px solid transparent;
      border-top-color: $tooltip-background;
      content: '';
      pointer-events: none;
      bottom: -15px;
    }
  }
}