<div class="container">
  <div>Hover <span class="tooltip-link" data-tooltip="This is a tooltip test with a huge text, wow that's big!">here</span> to see the result</div>
</div>

body {
  min-height: 500px;
  background: orange;
  color: white;
  font-family: "Satoshi", "Inter", sans-serif;
  font-size: 20px;
}
.container div {
   width: 100%;
   max-width: 30%;
   margin: 5px;
}
.container {
  width: 100%;
  height:500px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.tooltip-link {
  cursor: help;
  position: relative;
  text-decoration: underline;
}
.tooltip-link:hover::after {
    position: absolute;
    opacity: 0;
    content: attr(data-tooltip);
    bottom: 0%;
    animation: fadeIn 100ms cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
    left: 50%;
    animation-delay: 100ms;
    color: #707070;
    background: #ffffff;
    border-radius: 20px;
    min-width: 200px;
    max-width; 100%;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    padding: 10px;
    box-shadow: 0px 10px 33px #3333332e;
}

@keyframes fadeIn {
  0% {
    opacity:0;
    transform: translate(-50%, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -30px);
  }
}