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>​