papercss/src/components/_popovers.scss

// Core popovers
[popover-top],
[popover-right],
[popover-bottom],
[popover-left]{
  position: relative;
  margin: 24px;

  // Popover hover trigger
  &:hover {
    &:after {
      transition: opacity .2s ease-out;
      opacity: 1;
    }
  }

  // Creating popover::after element
  &:after {
    position: absolute;
    top: -6px;
    left: 50%;
    opacity: 0;
    padding: 4px 2px;
    min-width: 80px;
    font-size: 0.7em;
    text-align: center;
    color: $white;
    background: $light-dark;
    @include transition(opacity);
    transform: translateX(-50%) translateY(-100%);
    @include border-style();
    border: 2px solid $primary;
  }
}

// Popover positioning: left, right, top, bottom
[popover-left] {
  &:before {
    left: 0;
    top: 50%;
    margin-left: -12px;
    transform: translateY(-50%) rotate(-90deg);
  }

  &:after {
    content: attr(popover-left);
    left: 0;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
  }
}

[popover-right] {
  &:before {
    left: 100%;
    top: 50%;
    margin-left: 1px;
    transform: translatey(-50%) rotate(90deg);
  }

  &:after {
    content: attr(popover-right);
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateX(0%) translateY(-50%);
  }
}

[popover-top] {
  &:before {
    left: 50%;
  }

  &:after {
    content: attr(popover-top);
    left: 50%;
  }
}

[popover-bottom] {
  &:before {
    top:100%;
    margin-top: 8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg);
  }

  &:after {
    content: attr(popover-bottom);
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(0%);
  }
}