tooltip

how to do a tooltip with just html and css

by mynar7

HTML

<html>
<body>
<h1>
What's up Doc? <span class="tooltip">That's all folks</span>
</h1>
<p>
Ipsum text Ipsum text Ipsum text Ipsum text Ipsum text Ipsum text Ipsum text
</p>
</body>
</html>

CSS

h1 {
  position: relative;
}

.tooltip {
  visibility: hidden;
  position: absolute;
  top: 120%;
  left: 15%;
  z-index: 1;
  color: white;
  background-color: black;
  padding: 0 5px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s;
}
.tooltip::after {
  content: "";
  border: solid;
  border-width: 8px;
  border-color: transparent transparent black transparent;
  position: absolute;
  bottom: 100%;
  left: 15%;
  margin-right: 8px;
}

h1:hover .tooltip {
  opacity: 1;
  visibility: visible;
}