.fg-tooltip {
  position: absolute;
  left: 50%;
  z-index: 2;

  visibility: hidden;
  opacity: 0;

  width: auto;
  min-width: 100px;

  padding: 10px;

  border-radius: 10px;
  color: #FFFFFF;

  font-size: 12.5px;
  text-align: center;

  transform: translate(-50%, 0);
  transition: opacity .8s ease;
}

.fg-tooltip--visible {
  visibility: visible;
  opacity: 1;

  transition: opacity .8s ease;
}

.fg-tooltip--visible.fg-tooltip--below {
  transform: translate(-50%, 50px);
}

.fg-tooltip--visible.fg-tooltip--over {
  transform: translate(-50%, -50px);
}

.fg-tooltip:before {
  position: absolute;
  left: 0;
  right: 0;

  display: block;

  width: 15px;

  margin: auto;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  content: "";
}

.fg-tooltip--below:before {
  top: -10px;
}

.fg-tooltip--over:before {
  top: 100%;
}

.fg-tooltip-primary-text {
  margin-bottom: 0;

  font-size: 12.5px;
}

.fg-tooltip-secondary-text {
  margin-bottom: 0;

  font-size: 10px;
}