/* https://stackoverflow.com/a/64198437 */
.has-tooltip-before,
.has-tooltip-after {
  --tooltip-bg: goldenrod;
  --tooltip-border: darkgoldenrod;
  border-bottom: 1px dotted;
  cursor: pointer;
}

/* https://stackoverflow.com/a/14978871 */
.has-tooltip-before:hover,
.has-tooltip-after:hover {
  text-shadow: -0.25px 0 black, 0.25px 0 black;
}

.has-tooltip-before::before,
.has-tooltip-after::after {
  position: absolute;
  content: attr(data-tooltip);
  white-space: pre-wrap;
  pointer-events: none;
  left: 0.5em;
  right: 0.5em;
  background-color: var(--tooltip-bg);
  padding: 5px;
  border-radius: 5px;
  border: 2px solid var(--tooltip-border);
  box-shadow: 6px 6px 3px 3px rgba(0, 0, 0, 50%);
  opacity: 0;
  transition: opacity var(--transition-short);
  text-shadow: none;
  z-index: 2;
}

.has-tooltip-before::before {
  transform: translateY(calc(-100% - 5px));
}

.has-tooltip-after::after {
  transform: translateY(calc(1em + 5px));
}

.has-tooltip-before:hover::before,
.has-tooltip-after:hover::after {
  opacity: 1;
}