Reusable component library sources

                  
<div class="tooltip">
  <svg class="tooltip__icon">
    <use xlink:href="../../assets/images/sprite.svg#help"></use>
  </svg>
  <div class="tooltip__help">
    <div class="tooltip__text">Helper text</div>
  </div>
</div> 
                  
                

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

.tooltip__icon {
  width: 24px;
  height: 24px;
  color: var(--blue);
  cursor: pointer;
  pointer-events: all;
}

.tooltip__help {
  display: none;
}

.tooltip__icon:hover + .tooltip__help {
  position: absolute;
  display: inline;
  max-width: 300px;
  padding: 13px 21px;
  top: -150%;
  left: 50%;
  transform: translate(-50%, -10px);

  color: var(--grey-2);
  background-color: var(--primary);
  box-shadow: 0px 2px 4px var(--box-shadow-color);
  border-radius: 10px;
  
  pointer-events: none;
}

.tooltip__text {
  overflow: hidden;
}

.tooltip__text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;

  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: var(--primary) transparent transparent transparent;
}