大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

纯css怎么实现tooltip

小编给大家分享一下纯css怎么实现tooltip,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联专注于武宣企业网站建设,成都响应式网站建设公司,购物商城网站建设。武宣网站建设公司,为武宣等地区提供建站服务。全流程按需策划,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

效果

纯css怎么实现tooltip

原始版

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

button

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

改进版

于是改进了下面这个版本

html部分

  
    鼠标移动到这
    提示文本
  

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部分:

鼠标移动到这

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中有可能带有空格,那么也需要将空格显示出来。

看完了这篇文章,相信你对“纯css怎么实现tooltip”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章名称:纯css怎么实现tooltip
本文链接:http://dzwzjz.com/article/ijdijg.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP