原文：https://webdesign.tutsplus.co...
原作：Jase Smith
翻译：Stypstive

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

样例

这是我们之后要做的：

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

<span tooltip="message">visible text or icon, etc.</span> 关于可访谒性和成果的记注

如果你在寻找兼容508的提示框，或者需要带容器斗嘴侦测和/或HTML内容 vs 纯文本的智能提示框，有许多实用第三方脚本的解决方案能满足你的要求。

"用JavaScript来做完全可访谒的交互组件是命令式的" - Sara Soueidan, 打造一个完全可访谒的辅佐提示框...比你想的要难

这篇教程不会特地解决可访谒性的需求。你了解你的用户，知道他们需要什么，所以有关这方面，也要记得考虑他们的需求。

让我们设定几个预期

不需要JavaScript

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

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

代码例子中是没有前缀的（如有需要，为你的方针浏览器加上提供商前缀）

假设通过 mou搜索引擎优化ver/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; }

当浏览器看到诸如此类的对象时：

<span foo>Check it out!</span>

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

HTML元素有着各类百般的内置属性，但是我们也可以给出我们本身的属性。好比 foo ，又或者是 tooltip 。默认情况下，HTML不知道这些对象是什么意思，但是有了CSS，我们可以报告HTML这些自界说属性是什么意思。

为什么用属性选择器？

我们后面会使用属性选择器，主要是出于偏重疏散的目的。使用属性而不是类名，并不会让我们在详细水平上获得更多益处，类和属性在详细水平上是不异的。 然而，通过使用属性，我们可以把我们的内容放在一块儿，因为HTML属性可以有值，而类名没有值。

在这个例子的代码中，来权衡一下类名 .tooltip 比拟属性 [tooltip] 。类名是 [class] 属性的值中的一个，而tooltip属性可以存放一个值，它就是我们要显示的文字。

<span>lorem ipsum</span> <span tooltip="sit dolar amet">lorem ipsum</span> 此刻让我们来看看提示框炼金术

我们的提示框会使用两种差此外属性：

tooltip: 这个属性存放了提示框的内容（一个纯文本字符串）

flow: 可选；这个属性允许我们控制如何显示提示框。我们可以撑持很多方位，但是我们会笼罩4各常用方位：上，左，右，下