纯CSS添加Tooltip

纯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的知识。

如果您觉得有用就请点赞和分享
版权声明: 本文由 智慧宫 整理发表,转载请注明出处

发表评论

  1. fakeid 回复

    可以实现让框的宽度自适应文本长度吗?

    1. 智慧宫 回复

      这个可以通过CSS实现的

      1. fakeid 回复

        方便的话可以说一下怎么实现么,我试了一下午还是搞不懂。

        1. 智慧宫 回复

          如果你觉得比较难,建议使用bootstrap框架