_tooltips.scss

@mixin tooltip($tooltip-z-index: 1) {
  position: relative;

  &:before {
    content: '\f059'; // Question circle icon
    font-family: FontAwesome;
    color: $base-link-color;
  }

  .tooltip-contents {
    display: none;
    font-size: $tiny-font-size;
    text-transform: none;
  }

  &:hover .tooltip-contents,
  &:focus .tooltip-contents,
  &:active .tooltip-contents {
    border: $base-border;
    border-radius: $base-border-radius;
    padding: $base-spacing / 2 $base-spacing;
    background-color: $panel-primary;

    padding-top: calc(0.75rem + #{$small-strip-height});
    display: block;
    position: absolute;
    z-index: $tooltip-z-index;
    width: 40ch;
    left: calc(100% + #{$base-padding});
    top: 50%;
    transform: translateY(-50%);
    box-shadow: $base-box-shadow;
    border: 0;
    color: $grey-demon;
    font-weight: $font-weight-normal;

    &:before {
      @include small-strip;
    }

    &:after {
      content: '▲';
      position: absolute;
      top: 50%;
      right: calc(100% - 5px);
      transform: translateY(-50%) rotate(-90deg) scaleX(1.75);
      text-shadow:
        0 2px 0px rgba(255,255,255, 1),
        0 -1px 2px rgba(0, 0, 0, 0.25);
      font-size: 24px;
      color: white;
    }
  }
}