.help-tooltip {
  position: relative;

  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;

  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}

.help-tooltip::after {
  content: attr(data-help);
  position: absolute;
  background: #444;
  color: white;
  translate: -25%;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: normal;
  width: max-content;
  max-width: 30ch;
  font-size: 14px;

  pointer-events: none;
  transform: translateY(-100%) translateY(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  z-index: 1;
}

.help-tooltip::before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;

  left: 50%;
  bottom: 15%;
  transform: translateY(-100%) translateY(-12px);

  border-top: 10px solid #444;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  z-index: 1;
}

.help-tooltip:hover::after,
.help-tooltip:focus-visible::after,
.help-tooltip:hover::before,
.help-tooltip:focus-visible::before {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transform: translateY(-100%) translateY(-2px);
}