纯css实现tooltip提示

最新推荐文章于 2022-06-30 15:55:41 发布

原创最新推荐文章于 2022-06-30 15:55:41 发布 · 283 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

本文介绍如何在HTML中嵌入并利用CSS样式实现弹出式提示框的功能，通过添加em标签和相应的CSS规则，可以轻松地创建一个具有下箭头的提示框。读者可以通过访问CodePen实例进行实践和调整。

先看效果：

http://codepen.io/Jaosn/details/VLwqqK

在a标签里面增加em标签：

<a class="tooltip" href="#">
  Link content<em>this is tooltip.this is tooltip.</em>
</a>

css：

.tooltip {
 position: relative;
}
.tooltip:hover>em{
  display:inline-block;
}
.tooltip em {
  display:none;
  position: absolute;
  bottom: 24px;
  left:50%;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  width:100px;
  padding: 2px 4px;
  margin-left:-54px;
  background: #000;
  opacity:.7;
  text-align: left;
}
.tooltip em::before {
  content:'';
  position: absolute;
  bottom: -20px;
  left:50%;
  width:0;
  height:0;
  /*triangle*/
  border-top: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left:-5px;
}
.tooltip em::after {
  content:'';
  position: absolute;
  bottom: -19px;
  left:50%;
  width:0;
  height:0;
  /*triangle*/
  border-top: 10px solid #000;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left:-5px;
}

下箭头的描边就是两个移位的三角形叠起来的。