/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

/* Tooltip on Bottom */
.tooltip-bottom[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

/* Tooltip on Right */
.tooltip-right[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

/* Tooltip on Left */
.tooltip-left[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  right: 100%;
  white-space: nowrap;
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

http://webdesignerhut.com/pure-css-tooltips-with-html5-data-attribute/?ref=example

这是另一篇教程

转载请注明：有爱前端 » Pure CSS Tooltips