Pure CSS Tooltips

/* 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;
}

Tips:You can change the code before run.

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

这是另一篇教程

THE END
分享
二维码
打赏
< <上一篇
下一篇>>