<html>
  <body>
    <h1> Dev.To Tooltip CSS Challenge #2 </h1>
    <div class="tooltip">
      <h1>Hover Me <span class="tooltip-text"> Tooltip! </span></h1>
    </div>
  </body>
</html>
.tooltip {
  background-color: DeepSkyBlue;
  width: 155px;
  border-radius: 16px;
  white-space: nowrap;
  position: relative;
  color: white;
}

.tooltip:hover .tooltip-text {
  display: initial;
}

.tooltip:focus .tooltip-text {
  display: initial;
}

.tooltip > h1 {
  padding: 8px;
/*   text-align: center; */
}

.tooltip-text {
  display: none;
  position: relative;
  left: 40%;
  background-color: black;
  padding: 8px;
  border-radius: 16px;
}

.tooltip .tooltip-text::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -12px;
  border-width: 12px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.