tooltip.html

<style>

body{
  margin: 100px;
  text-align: center;
}

[tooltip]{
  position: relative;
}

[tooltip]:after{
  opacity: 0;
  color: #fff;
  padding: 0 3px;
  border-radius: 3px;
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  content: attr(tooltip);
  background: rgba(0, 0, 0, 0.9);
  transition: all 0.18s ease-out 0.18s;
  transform-origin: top;
}

[tooltip]:hover:after{
  opacity: 1;
}

.tooltip-pos-left:after{
  top: auto;
  right: 100%;
}
.tooltip-pos-up:after{
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 0);
}
.tooltip-pos-down:after{
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
}
</style>

<h1>
  <a tooltip="hello world" class="tooltip-pos-down" >Hover me!</a>
</h1>