.hover-text {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  position: relative;
  margin-top:1px;
}

.hover-text::before {
  content: attr(data-text);
  position: absolute;
  background-color: #ffae38;
  width: fit-content;
  color: #000;
  padding: 0.4rem 1rem;
  top: -10px;
  left: -200px;
  right: 0;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(20%);
  transition: all .3s ease-in-out;
}

.hover-text[data-text]:not([data-text=""])::before {
  opacity: 0;
}

.hover-text[data-text]:not([data-text=""]):hover::before {
  opacity: 1;
  transform: translateY(0%);
}