<div class="tooltip">
  <div class="tooltip__icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 24 24" class="svg-icon">
        <use xlink:href="#help"></use>
    </svg>
  </div>
  <div class="tooltip__help">
    <div class="tooltip__text">Helper text</div>
  </div>
</div>
                  
                

                  
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
}

.tooltip__icon {
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: relative;
}

.tooltip__icon .svg-icon {
  fill: none;
  color: var(--primary);
  width: 100%;
  height: 100%;
}

.tooltip__help {
  width: 130px;
  height: 45px;
  border-radius: 10px;
  background: var(--primary);
  position: absolute;
  bottom: 100%;
  transform: translate(-50%, -10px);
  left: 50%;
  color: var(--white);
  padding: 13px 21px;
  opacity: 0;
  transition: opacity 0.2s linear, transform 0.1s linear;
  pointer-events: none;
}

.tooltip:hover .tooltip__help {
  opacity: 1;
  transform: translate(-50%, -13px);
  pointer-events: all;
}

.tooltip__help:after {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}

.tooltip__help:after {
  border: 7px solid transparent;
  border-top: 7px solid var(--primary);
}

.tooltip__help:after {
  position: absolute;
  display: inline-block;
  content: "";
}

.tooltip_text {
  margin: auto;
}