quill鼠标悬浮 出现提示_使用CSS content的attr实现鼠标悬浮提示（tooltip）效果

当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击了按钮之后需要确认自己没点错时，又或是带图片和字幕的复活节彩蛋，提示框是用来增强用户界面的绝佳手段。现在，让我们来做几个动画提示框，没有别的，只有HTML和CSS。

样例

这是我们之后要做的：

在我们沉浸在写代码的过程中之前，让我们先来看看我们的意图是什么。主要目的是为了获得一种简单的添加提示框的方法，这样一来，我们之后就能够通过增加一个自定义的 tooltip 属性来做到这一点。

visible text or icon, etc.

让我们设定几个预期

不需要JavaScript

我们将会使用属性选择器(而不是类名)，以及CSS内建的模式匹配

加到现有的DOM元素(你的标签中不需要新的元素)

代码例子中是没有前缀的(如有需要，为你的目标浏览器加上供应商前缀)

假设通过 mouseover/hover 来触发提示框

仅仅是纯文本提示框(HTML，图片等等都不支持)

当唤起提示框时，有巧妙的动画

好了，老司机要开车了！

哦，等等。我们还要先处理一个问题，是关于”不需要额外标签”的。毕竟，这很巧妙。 我们的提示框真的不需要额外的DOM元素，因为它们完全是基于伪元素的(::before 和 ::after)，我们可以通过CSS来控制。

如果你已经在其它样式集中使用了一个元素的伪元素，又希望在这个元素是加一个提示框，那么你可能需要稍稍做一些重构。

没什么比得上来一场提示框盛会了！

等等。小坏蛋！还有一个警告：CSS定位。为了提示框正常运作，它们的父元素(我们把提示框添加在它后面)需要是

position: relative，或者

position: absolute，或

position: fixed

基本上，什么都行，只要不是 position: static — 这是浏览器赋给几乎所有元素的默认定位模式。提示框是绝对定位的，所以它们需要知道它们的绝对值在什么边界内是有意义的。 默认的定位指令 static 不会声明它的边界，也不会给我们的提示框以上下文来进行相对定位。所以提示框会使用之后，最近的，有声明边界的父元素。

你还需要根据你如何使用提示框来决定哪个定位指令最为合适。这篇教程假设父元素是 postion: relative 如果你的UI依靠一个绝对定位的元素，那么在那个元素上部署一个提示框，也会需要一些重构(额外的标签)。

让我们开始吧。

属性选择器：快速回顾

大多数CSS规则印象中都是用类名写的，比如 .this-thing ,但是CSS有几个类型的选择器。我们巧妙的提示框打算使用属性选择器——也就是方括号表示法。

[foo] {

background: rgba(0, 0, 0, 0.8);

color: #fff;

}

当浏览器看到诸如此类的东西时：

Check it out!

浏览器会知道，它需要应用 [foo] 规则了，因为 标签有一个叫做 foo 的属性。在这个例子中，span自身会有一个半透明的黑色背景，以及白色文字。

HTML元素有着各种各样的内置属性，但是我们也可以给出我们自己的属性。比如 foo ，又或者是 tooltip 。默认情况下，HTML不知道这些东西是什么意思，但是有了CSS，我们可以告诉HTML这些自定义属性是什么意思。

为什么用属性选择器？

我们后面会使用属性选择器，主要是出于侧重分离的目的。使用属性而不是类名，并不会让我们在详