Here is an example of tooltips that we can make with just HTML and CSS (hover over the items in the list to see tooltips):

We can apply custom data attributes to create this list in the following way:

HTML

<section>
  <h1>A few JavaScript methods:</h1>
  <ul>
    <li data-info="Returns the value of a base raised to a power">Math.pow()</li>
    <li data-info="Returns the square root of a number">Math.sqrt()</li>
    <li data-info="Returns the integer part of a number by removing any fractional digits">Math.trunc()</li>
  </ul>
</section>

CSS

Slightly adjusted for a basic example.

section {
  max-width: 600px;
  padding: 1rem;
  border: 5px solid #302a38;
  border-radius: 5px;
  margin: auto;
  background: #55505c;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

h1 {
  margin-bottom: 2rem;
}

li {
  position: relative;
  margin-top: 2rem;
  cursor: help;
}

li:after {
  --tooltipScale: 0;

  content: attr(data-info);
  position: absolute;
  top: -1.75rem;
  left: 0;
  transform: scale(var(--tooltipScale));
  transform-origin: bottom left;
  padding: 2px 5px;
  border: 2px solid #302a38;
  border-radius: 5px;
  background: #e1daea;
  color: #302a38;
  transition: 0.5s transform;
}

li:hover:after {
  --tooltipScale: 1;
}

If you want a more detailed explanation, you can check this article on my Medium blog.

Thank you for reading.