*, *::before, *::after {
  box-sizing: border-box
}

body {
  margin-top: 100px;
}

[data-tooltip] {
  position: relative;
}

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

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

  transition: transform 100ms;
  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: .5em;
  border-radius: .3em;
  width: max-content;
  max-width: 100%;
  text-align: center;

  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;
}