---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

Pure CSS Tooltips

前端开发 蚂蚁 1015℃ 0评论
/* 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

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情