Npcink Blog
切换菜单

怎么添加 Tooltip 提示框？ - css 笔记

添加一个小符号，可做链接引导或是一个简单的提示

最后更新于
本页目录4 节

通过 CSS 的 Tooltip 提示框，我们可以在页面中一些需要进行内容补充的地方添加一个符号，访客将鼠标移动到该符号或是点击该符号，即可查看相关补充内容。这一次的 CSS 笔记向大家介绍下相关内容。

方案一：链接法

这种提示框用 CSS 很好展示，给一个问好加上园圈就好了，例如这样：

<a target="_blank" href="https://www.npc.ink/#"style="display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: hsla(0,0%,100%,.1);
    text-align: center;
    color: #111;
    font-family: REEJI-BigYoung-BoldGB;
    font-size: 14px;
    border: 1px solid;
    border-radius: 100%;                            ">?</a>

效果展示：

?

方案二：文本提示

当然，如果只是一些简单的提醒，专门做个页面进行介绍就不太适合了，可以试试这个，当鼠标移到到图标上，就有文本提示：

   <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content">
     <span class="tip-content-inner">
       Tooltip提示框
    </span>
  </span>
   </span>
<style type="text/css">


.tooltip{
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}
.tooltip-icon{
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 1px solid #999;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: "caption", Arial;
  text-align: center;
}
.tip-content{
  z-index: 999999;
  display: none;
  position: absolute;
  left: -5px;
  bottom: 30px;
  width: 240px;
}
.tip-content-inner{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: 200px;
  padding: 10px;
  line-height: 20px;
  border: 1px solid #ccc;
  background: #fff;
  line-height: 20px;
  color: #333;
  font-size: 16px;
}
.tip-content-inner:before{
  content: "";
  position: absolute;
  left: 7px;
  bottom: -24px;
  border-style: solid solid solid solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 12px 6px;
}
.tip-content-inner:after{
  content: "";
  position: absolute;
  left: 8px;
  bottom: -20px;
  border-style: solid solid solid solid;
  border-color: #fff transparent transparent transparent;
  border-width: 10px 5px;
}
.tooltip:hover > .tip-content{
  display: block;
}


</style>

效果展示：

   <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content">
     <span class="tip-content-inner">
       Tooltip提示框
    </span>
  </span>
   </span>
<style type="text/css">


.tooltip{
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}
.tooltip-icon{
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 1px solid #999;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: "caption", Arial;
  text-align: center;
}
.tip-content{
  z-index: 999999;
  display: none;
  position: absolute;
  left: -5px;
  bottom: 30px;
  width: 240px;
}
.tip-content-inner{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: 200px;
  padding: 10px;
  line-height: 20px;
  border: 1px solid #ccc;
  background: #fff;
  line-height: 20px;
  color: #333;
  font-size: 16px;
}
.tip-content-inner:before{
  content: "";
  position: absolute;
  left: 7px;
  bottom: -24px;
  border-style: solid solid solid solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 12px 6px;
}
.tip-content-inner:after{
  content: "";
  position: absolute;
  left: 8px;
  bottom: -20px;
  border-style: solid solid solid solid;
  border-color: #fff transparent transparent transparent;
  border-width: 10px 5px;
}
.tooltip:hover > .tip-content{
  display: block;
}


</style>

代码来源：