Tooltip

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quisquam nesciunt nisi natus, sapiente, labore voluptate ab explicabo dolore eligendi ducimus quam blanditiis ad et possimus quis! Corporis est natus cupiditate saepe dignissimos neque obcaecati consequatur inventore voluptates distinctio ullam molestiae illum quidem temporibus tenetur assumenda tempore expedita commodi, voluptatibus esse laudantium excepturi. Deleniti vel quia soluta odit ipsa aliquid nostrum eaque cumque obcaecati assumenda, deserunt blanditiis beatae itaque, dolore in, sed quas. Aliquam ullam distinctio magni reiciendis, culpa, quos qui quidem placeat tempora quis eaque hic doloremque nobis nihil error sint iste modi ex at nisi? Aliquam molestias necessitatibus ut vitae, aut porro ea tenetur molestiae cupiditate unde eaque a similique eum, id laborum, inventore aperiam modi eos quasi possimus. In voluptatem minus voluptas impedit animi minima esse, suscipit, quisquam, similique ipsam ut praesentium natus inventore debitis ratione reprehenderit ad recusandae. aperiam quam perspiciatis enim dolorum quasi. Unde blanditiis corrupti vero molestiae atque excepturi, sunt, optio facilis, aspernatur sit eligendi aut nesciunt obcaecati nam similique natus illo fugiat officiis! Rerum odio praesentium dolore pariatur sed quis tempora et qui! Dolores exercitationem explicabo quibusdam nihil facere consectetur quasi distinctio deserunt aut dignissimos, aliquam ipsum vel sunt velit aperiam, adipisci, quam ab ex at ad.

HTML CSS

<div class="tooltip">
  <svg
    class="tooltip__icon"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <use href="/library/svg-sprites.svg#question" />
  </svg>
  <div class="tooltip__datails">Helper Text</div>
</div>

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

.tooltip__datails {
  opacity: 0;
  position: absolute;
  left: -100vw;

  min-width: 129px;
  color: var(--white);
  text-align: center;
  font-family: Inter;
  font-size: 16px;

  background: var(--primary);
  padding: 20px;
  border-radius: 8px;
  top: -10px;
  transform: translateY(-100%) translateX(-50%);
  transition: opacity 0.3s ease-in-out;
}

.tooltip__datails::after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-top: 10px solid var(--primary);
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip_preview {
  transform: translateY(30px);
}

.tooltip__icon:hover ~ .tooltip__datails,
.tooltip_preview .tooltip__datails {
  opacity: 1;
  left: 50%;
}