.driver-traits span {
  position: relative;
  cursor: help;
}

.driver-traits span::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 230px;
  padding: 9px;
  background: #0d1920;
  border: 2px solid #d7b957;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
  color: #f3ead0;
  font: 11px/1.35 Arial, sans-serif;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .15s, transform .15s;
}

.driver-traits span:hover::after,
.driver-traits span:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.driver-traits span:focus-visible {
  outline: 2px solid #f1c854;
}