纯CSS添加Tooltip

网站的Tooltip是指在用户指向控件时显示相应的文本，在网站上添加Tooltip提示信息是非常有用的。例如，可以描述网站的链接所指对象的页面的信息，为按钮添加Tooltip可以解释按钮的作用等。Tooltip不但可以节省网页空间，同时为网站阅读者提供提示信息。如果你使用的是WordPress，那么这个功能可以使用插件实现，例如 Simple Tooltip 以及Magic Tooltips等，也可以不依赖Js,用简单的几行代码来实现，我更喜欢代码来实现：

HTML结构

首先来看看HTML结构，结构非常简单。

<div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
</div>

CSS

将下面的CSS添加到style.css中即可。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

大功告成，你可以说访问https://jsfiddle.net/xw1gaa7c/学习更多关于Tooltip的知识。