前言
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中有可能带有空格,那么也需要将空格显示出来。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
随着计算机和网络技术的飞速发展,在线签名技术越来越多的被应用在无纸化办公中...
下面通过实例代码给大家介绍HTML5中使用json对象的方法,具体代码如下所示: !DO...
据统计,从2003年以来,网页的平均体积已经增长了三倍。从2003年到2008年,网页...
GitHub 源码地址: https://github.com/justjavac/... 。 将 Google CDN 替换为...
我们一般在打开相机的时候有个扫描框,然后静态二维码有时候为了聚焦和利于扫描...
写这个效果,可以熟悉以下: 1、相对定位中的绝对定位; 2、CSS 针对浏览器 HACK...
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,...
前言 最近使用阿里云K8S要用到ECS做为它的Node服务器,云盘为20G,后来发布的服...
前言 Vue Router 是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成,让...
您将要创造的 在这个新教程中,我们将使用CSS和JavaScript来创建响应式管理仪表...