css tooltip

css:

.tooltip {
  position: relative;
}

.tooltip:before {
  content: attr(title);
  position: absolute;
  display: none;
  width: 200px;
  background: yellow;
  border: 1px solid black;
  padding: 8px;
  margin: 25px 0 0 10px;
}

.tooltip:hover::before {
  display: block;
}

html:

<p class="tooltip" title="tooltip text">hover me to see tooltip</p>​