Super Simple, Tiny, SCSS tooltips.

_tooltip.scss

$spacer: 1rem;
$tooltip-border-radius: ( 0.333 * $spacer );

[data-tooltip] {
  position: relative;

  &::before,
  &::after {
    opacity: 0;
    pointer-events: none;
    transition: all 200ms ease 200ms;
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 10;
    transform: translate( -50%, ( 0.5 * $spacer ) );
    transform-origin: top;
  }

  &::before {
    content: '';
    width: 0;
    height: 0;
    border: ( 0.5 * $spacer ) solid transparent;
    border-top-color: rgba( #333, 0.9 );
    border-top-width: ( 0.4 * $spacer );
    margin-bottom: ( -0.4 * $spacer );
    pointer-events: none;
  }

  &::after {
    background: rgba( #333, 0.9 );
    border-radius: $tooltip-border-radius;
    color: white;
    content: attr( data-tooltip );
    font: normal 0.75rem/1.15 'Open Sans', Arial, sans-serif;
    padding: 0.5em 1em;
    white-space: nowrap;
    margin-bottom: ( 0.5 * $spacer );
  }

  &:hover {
    &::before,
    &::after {
      opacity: 1;
      padding-top: auto;
      transform: translate( -50%, 0 );
    }
  }
}