[data-tooltip] {
  position: relative;
}

[data-tooltip]:after {
  display: none;
  position: absolute;
  top: 1;
}

[data-tooltip]:after {
  background-color: #808080;
  border-radius: 7px;
  color: #ffffff;
  content: attr(data-tooltip-message);
  left: 0;
  margin-top: 1.5em;
  padding: 5px 15px;
  white-space: pre-wrap;
  bottom: 100%;
  width: auto;
}

[data-tooltip]:hover:after {
  display: block;
}