.tooltip {
  position: fixed;
  z-index: 9999;
  transform: translate(-50%, -100%);

  padding: 7px 10px;
  border-radius: 6px;

  background: #222;
  color: #fff;
  font: 13px/1.2 system-ui, sans-serif;
  white-space: nowrap;

  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}

.tooltip.visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 4px));
}