[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  --tooltip-color: #333;
  --arrow-size: 1rem;
  --scale: 0;

  position: absolute;
  left: 50%;
  transform: translate(-50%, var(--translate-y)) scale(var(--scale));

  transition: transform 125ms;
  transition-timing-function: linear;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  --scale: 1;

  transition-timing-function: cubic-bezier(0.25, 0.1, 0.45, 1.93);
}

[data-tooltip]::before {
  --translate-y: calc(-100% - var(--arrow-size));

  content: attr(data-tooltip);
  background-color: var(--tooltip-color);
  color: white;
  padding: 0.7em 1em;
  border-radius: 0.3em;
  width: max-content;
  max-width: 100%;
  text-align: center;
  font-size: 1.2rem;

  transform-origin: bottom center;
}

[data-tooltip]::after {
  --translate-y: calc(-1 * var(--arrow-size));

  content: "";
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);

  transform-origin: top center;
}