<div class="icon-container">
<i class="fa fa-search"></i>
<span class="icon-tooltip">Search</span>
</div>
.icon-container {
position: relative;
display: inline-block;
}
.icon-tooltip {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.icon-container:hover .icon-tooltip {
visibility: visible;
}首先，大家创建一个
元素，并给它一个带有.icon-container类名的类。内部，大家使用标签添加一个fontawesome搜索图标，并使用标签添加一个包含“搜索”文本的图标说明。然后，大家使用CSS将它们彼此挂钩。
大家在CSS中给.icon-container类一个相对定位，并将.i元素和.icon-tooltip元素绝对定位。.icon-tooltip没有保存计算后的位置，因此大家使用负边距和一些left和bottom属性来确保它始终位于其上方的图标下面。大家还将z-index设为1，以确保.tooltip在图标之上。
最后，大家使用:hover状态选择器为.icon-container元素定义一个鼠标悬停事件，以显示.icon-tooltip元素。这将覆盖visibility:hidden样式，使.tool-tip元素可见。
在完成这个简单的示例后，您现在可以轻松地在一个图标下方添加标注，并以交互的方式显示它们。这是CSS在设计中的一种威力。