.tooltip {
  position: absolute;
  z-index: 3;
  visibility: hidden;
  padding: 8px 16px;
  cursor: pointer;
  background: #222;
  transition: visibility .3s ease, opacity .3s ease;//, margin .3s ease;
  text-align: center;
  opacity: 0;
  color: #fff;
  border-radius: 3px;

  &.top {
    @include arrow(down, $color: #222, $position: absolute);
    margin-top: 0;

    // &.shown { margin-top: 0; }
  }

  &.right {
    @include arrow(left, $color: #0EC2E0, $center: 18%, $position: absolute);
    margin: -16px 0 0 24px;
    // &.shown {  }
  }

  &.bottom {
    @include arrow(up, $color: #0EC2E0, $position: absolute);
    margin: 24px 0 0 0;
    // &.shown {}
  }

  &.shown {
    visibility: visible;
    opacity: 1;
  }
}

.tooltip-title,
.tooltip-subtitle {
  font-size: 11px;
  line-height: 13px;
}

.tooltip-subtitle {
  margin-top: 3px;
  opacity: .6;
}