纯css实现漂亮又健壮的tooltip

2018-07-14 admin

前言

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

预览

https://codepen.io/moddx/pen/…

原始版

最简单的莫过于就用原始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中有可能带有空格,那么也需要将空格显示出来。

原文链接:https://segmentfault.com/a/1190000015634730

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35976.html

文章标题:纯css实现漂亮又健壮的tooltip

相关文章
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部