用纯CSS怎样制作美化的tooltip效果，具体怎么操作

发布时间：2023-10-04 14:20:59 所属栏目：语言来源：

导读：tooltip的实现有多种方式，下面是一个tooltip成长史。

原始版

最简单的莫过于就用原始title属性，像这样：

<button title="tips">button</button>

缺点是体验是差了点，并且鼠标移上去，过一会儿才响

tooltip的实现有多种方式，下面是一个tooltip成长史。

原始版

最简单的莫过于就用原始title属性，像这样：

<button title="tips">button</button>

缺点是体验是差了点，并且鼠标移上去，过一会儿才响应。

改进版

于是改进了下面这个版本

html部分

  <div class="btn">

    <span title="提示文本">鼠标移动到这</span>

    <span class="tip">提示文本</span>

  </div>

css部分

.btn {

  width: 100px;

  position: relative;

  display: inline-block;

  background-color: gold;

  padding: 5px;

  cursor: pointer;

}

.btn .tip {

  display: none;

  width: 100px;

  background-color: black;

  color: #fff;

  text-align: center;

  padding: 5px 0;

  font-size: 12px;

  /* 垂直居中 */

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 118px;

  z-index: 1;

}

.btn:hover .tip {

  display: block;

}

一开始设置tip是隐藏display: none;，当鼠标移上去，将tip样式设置为display: block;来显示。

终极版

其实改进版一般用也够了，但同事老爷们觉得不够漂亮，逼格不高，没有动画。

无意间逛到百度云管理后台页面，发现了一排漂亮的tooltip，这不正是我需要的吗？窃喜！于是研究一番，拿来即用。

html部分：

<button class="btn" tip="a bcdef">鼠标移动到这</button>

css部分：

    .btn {

      position: relative;

      display: block;

      margin: 100px auto;

      padding: 10px;

      font-size: 14px;

      background: #fff;

      color: green;

      border: 1px solid green;

      cursor: pointer;

    }

    [tip]:after {

      content: attr(tip);

      visibility: hidden;

      /* 实现垂直居中 */

      position: absolute;

      top: 50%;

      transform: translate(-5px, -50%);

      transition: all .3s;

      left: 100%;

      opacity: 0;

      /* 空白问题 */

      white-space: pre;

      font-size: 16px;

      padding: 5px 10px;

      background-color: rgba(18,26,44,0.8);

      color: #fff;

      box-shadow: 1px 1px 14px rgba(0,0,0,0.1)

    }

    [tip]:hover {

      /* ie兼容 */

      overflow: visible

    }

    .btn:hover:after {

      opacity: .8;

      transition: all .3s;

      transform: translate(5px, -50%);

      visibility: visible;

      display: block;

    }

首先，在标签中加上属性tip，css样式中用content: attr(tip);获取属性值。

默认设置tip隐藏visibility: hidden;。

用transform: translate(-5px, -50%);实现居中和偏移效果。

动画时间设置为0.3s:transition: all .3s;。

注意：white-space: pre;是为了考虑到tip中有可能带有空格，那么也需要将空格显示出来。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!