.tooltip {
  position: relative;
}

.tooltip-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--dark-gray);
  border-radius: 0.25rem;
  color: var(--white);
  font-size: 0.75rem;
  margin: 4px 0 0 -0.5rem;
  max-width: 320px;
  padding: 0.5rem;
  z-index: 999;
}
.tooltip-content a {
  color: var(--white) !important;
}

.tooltip:hover .tooltip-content,
.tooltip:focus .tooltip-content,
.tooltip:active .tooltip-content {
  display: block;
}

/* Add hotspot above tooltip content */
.tooltip-content:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 5px solid transparent;
  left: 0;
  top: -5px;
  width: 100%;
}

/* Tooltip arrow */
.tooltip-content:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--dark-gray);
  left: 0.5rem;
  top: -5px;
}