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

当用户的界面出现漂亮图标时，默认会附带额外的文字说明；另外一种情况是在他们点击按钮后希望确认无误时；还有包含图片和字幕的节日彩蛋也会配上提示框以增强视觉体验。接下来的任务就是设计并实现这些动画提示框，在技术实现上我们仅依赖于基础的HTML语言以及CSS样式表。

样例

这是我们之后要做的：

当我们正在专注于编写代码时，请先明确我们的目标是什么。为了实现一个简单且有效的提示框功能，在以后的操作中只需插入自定义化的tooltip属性即可完成任务。

visible text or icon, etc.

让我们设定几个预期

不需要JavaScript

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

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

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

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

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

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

好了，老司机要开车了！

哦

如果在其他样式集中已经实现了某个元素的伪元素，并且还想在此处增加一个提示框的话，那么建议您稍作调整以达到预期效果。

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

请稍等！小心！还有一个重要的警告是关于CSS定位的问题。为了确保提示框能够正常运行，请确保它们的父元素（例如，在我们将其放置在其后时）满足特定条件。

position: relative，或者

position: absolute，或

position: fixed

通常情况下，默认布局（position: static）会被应用到所有元素上。然而，在这种情况下，默认布局无法直接应用于提示框等绝对定位元素——因为这些元素必须明确其在何处有实际意义才能被正确处理。static布局不会指定其边界信息，并且也不会提供上下文信息来实现相对定位功能；因此, 提示框通常会选择最近且具有明确边界定义的那个父容器作为其位置基准点。

在使用提示框时，请根据其用途选择最适合的定位指令。该教程假设父元素设置为相对定位。如果你的UI依赖于一个绝对定位的元素，则在那个位置安装提示框，则需要进行一些调整（添加了一些辅助标记）。

让我们开始吧。

属性选择器：快速回顾

在CSS规则的印象中，默认多使用类名进行书写，在这种情况下，默认的例子如前所述.然而，在CSS中存在其他类型的语法结构,其中就包括了通过方括号表示属性选择器的形式来实现更为灵活的选择逻辑.我们的智能提示框计划采用属性选择器作为主要语法形式,这种设计不仅提升了可读性,也简化了后续开发流程.

[foo] {

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

color: #fff;

}

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

Check it out!

该浏览器能够识别该规则；由于标签包含了一个名为 foo 的属性，在此示例中 span本身具有一种半透明的黑色背景，并且显示白色文字。

HTML元素不仅具备丰富的内置属性，在实际应用中我们还可以添加自定义属性。例如 'foo' 属性，或者 'tooltip' 属性。在缺乏明确解释的情况下，默认状态下HTML元素对这些额外信息并不了解，在这种情况下借助CSS技术，则能够向系统解释这些自定义属性的作用。

为什么用属性选择器？

我们之后会采用属性选择器，并非为了其他目的而是为了区别开目的。即使采用属性而非类名也不会提升详细程度。类与属性在详细程度上是一致的。然而，在采用属性时，则能够将我们的内容整合在一起。因为HTML中的 attribute 具备值的概念而 class 概念不具备这一特点。

在这个例子的代码中, 为了比较类名.tooltip与对比属性tooltip之间的关系, 分析一下它们之间的差异与联系。其中, 类名属于[ class ]属性的一个取值, 而tooltip属性则存储一个字符串, 这个字符串即是我们要显示的文字内容。

lorem ipsum

lorem ipsum

现在让我们来看看提示框炼金术

我们的提示框会使用两种不同的属性：

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

flow: 可配置；该属性支持管理其显示方式；该属性将提供多种方向选择，并将覆盖4个常用方向：

上，左，右，下

现在，请为每一个提示框做好充分的准备。
所有提示框都将遵循这些规则。
不论flow属性被设置为何值。
在flow属性取不同值时，步骤6和7会有不同的处理方式。

1. 相对性

这是设置在提示框父元素上的一个定位指令。通过指定一个定位指令可以使提示框的组成部分（即::before 和 ::after 伪元素）采用基于父元素的绝对定位方式来实现定位效果，并避免因复杂结构而产生的参考系混乱问题。

tooltip {

position: relative;

}

2. 伪元素准备时间

现在是准备创建伪元素的时候了，在这一部分中我们将重点介绍如何为::before和::after这两个前缀设置标准属性内容属性的作用使得伪元素得以实现而content属性则是实现这一功能的关键所在我们暂时将详细探讨这个核心内容

tooltip::after {

line-height: 1;

user-select: none;

pointer-events: none;

position: absolute;

display: none;

opacity: 0;

/* opinions */

text-transform: none;

font-size: .9em;

}

3. 丁克帽

我不清楚丁克帽是否正确命名；我习惯称它为"丁克帽"。这是一个细长的三角形符号，在指向调用者的方向上模仿了对话气泡的效果。在边界颜色部分我们采用了透明效果；由于上色需要考虑提示框的flow值变化，在此之后还需要添加具体的颜色。

tooltip::before {

content: '';

z-index: 1001;

border: 5px solid transparent;

}

字段声明中的值被设为空字符串，并非误写。在字符串中没有任何内容。但我们特意为此设置了该属性以便实现伪元素的显示效果。

为了构造一个三角形，在空盒子周围增加了一定的厚度，并未指定盒子的具体宽度和高度参数。仅为盒子的每一条边界设置特定的颜色。

4. 气泡！

这是关键点。观察到 content: attr(tooltip) 这一部分所表达的意思是：该伪类应以tooltip属性的值作为其内容内容。这也正是为何我们更倾向于使用属性而非类名以达到令人称道的效果的原因。

tooltip::after {

content: attr(tooltip); /* magic! */

z-index: 1000;

/* most of the rest of this is opinion */

font-family: Helvetica, sans-serif;

text-align: center;

/*

Let the content set the size of the tooltips

but this will also keep them from being obnoxious

*/

min-width: 3em;

max-width: 21em;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

/* visible design of the tooltip bubbles */

padding: 1ch 1.5ch;

border-radius: .3ch;

box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);

background: #333;

color: #fff;

}

请留意观察丁克帽和气泡所具有的 z-index 值。这些数值可以取任意值。但必须记住的是, z-index 值具有相对性。例如,在嵌套于 z-index 为3 的容器中的一元素具有 z-index 1001,则该元素位于该容器中的最顶端位置。

为了确保视觉效果的一致性，在设计气泡时必须确保其z-index低于丁克帽至少一个档位。如果气泡与丁克具有相同的z-index或更高，并且提示框采用了box-shadow效果，则可能导致在显示过程中出现颜色不一致的问题。

5. 交互动作

当鼠标悬停在带有提示框的元素上时，默认会触发显示。大致如此。

tooltip:hover::after {

display: block;

}

如果你回顾在“样式”部分的第2部分, 你会发现我们对提示框的组成部分采用了 opacity: 0; 和 display: none; 的设置。这样做的目的是为了利用CSS动画效果来实现提示框的显示和隐藏功能。

无法将display属性设置为动画效果。然而通过设置opacity属性则可实现动态效果。建议等到其他步骤完成后才进行动画设置。若非对此感兴趣，则只需省略第2步中的 opacity: 0 设置即可。

最终需为每一个提示框实施某种机制，在无内容时确保其被抑制。若采用Vue.js、Angular、React或PHP等前端框架生成提示框，则无需依赖笨拙的空置气泡。

/* don't show empty tooltips */

tooltip=''::after {

display: none !important;

}

6. 流控制

这一操作将显著提升复杂度。我们采用了若干非传统性的选择器，以flow值（若无flow属性则不考虑）为基础确定位置。

在我们写样式之前，让我们看看将要用到一些选择器模式。

[tooltip][flow^="up"]::before {

/* ...

properties: values

... */

}

这是一个指令向浏览器发送指示：“对于所有拥有tooltip属性的对象而言，在以下两种情况下进行样式应用：一是这些对象不包含flow属性；二是这些对象包含flow属性但其值以字母'up'开头时，请将其样式应用到该类元素的::before伪类标记上。”

此处采用了一种称为 flow 的特定模式，在这种情况下不仅能够实现对原有数据集进行扩展操作而且能够减少必要的 CSS 重置步骤。该 flow 模式采用了 ^= (开头)匹配符来进行参数配置。如果你希望增加其他类型的流动控制功能，则可以通过这种配置方式分别对不同方向如 up-right 和 up-left 方向进行样式应用（代码实现）。我们在此不展开讨论这些流动控制问题，并建议您参考 CodePen 上我之前的提示框演示以获取更详细的实现细节

以下是教程中所讲到的4个流所对应的CSS代码块。

上(这是默认的方向)

/* ONLY the ::before */

[tooltip][flow^="up"]::before {

bottom: 100%;

border-bottom-width: 0;

border-top-color: #333;

}

/* ONLY the ::after */

[tooltip][flow^="up"]::after {

bottom: calc(100% + 5px);

}

/* Both ::before & ::after */

[tooltip][flow^="up"]::before,

[tooltip][flow^="up"]::after {

left: 50%;

transform: translate(-50%, -.5em);

}

下:

[tooltip][flow^="down"]::before {

top: 100%;

border-top-width: 0;

border-bottom-color: #333;

}

[tooltip][flow^="down"]::after {

top: calc(100% + 5px);

}

[tooltip][flow^="down"]::before,

[tooltip][flow^="down"]::after {

left: 50%;

transform: translate(-50%, .5em);

}

左:

[tooltip][flow^="left"]::before {

top: 50%;

border-right-width: 0;

border-left-color: #333;

left: calc(0em - 5px);

transform: translate(-.5em, -50%);

}

[tooltip][flow^="left"]::after {

top: 50%;

right: calc(100% + 5px);

transform: translate(-.5em, -50%);

}

右:

[tooltip][flow^="right"]::before {

top: 50%;

border-left-width: 0;

border-right-color: #333;

right: calc(0em - 5px);

transform: translate(.5em, -50%);

}

[tooltip][flow^="right"]::after {

top: 50%;

left: calc(100% + 5px);

transform: translate(.5em, -50%);

}

7. 让一切都动起来

动画是很神奇的。动画可以做到：

让用户感觉舒服

让用户感受到你的用户界面的空间感

注意到该看到的东西

让用户界面中本来非黑即白的生硬效果变得柔和

我们的提示框归类于这一类别的末端部分。仅凭一个短暂的文字浮出水面并迅速隐去的效果并不令人满意。我们可以让它变得更为平滑和自然一些。

关键帧 (@keyframes)

基于关键帧的动画方案中需要用到@keyframe标记符（...）。对于垂直方向上的提示框应采用tooltips-vert标记符实现其动画效果；而水平方向上的提示框则使用tooltips-horz标记符来完成效果展示。值得注意的是，在这些关键帧设定中我们仅关注于提示框应有的最终形态（...），而无需关心起始位置（...），因为每个提示框内部都包含了自身所需的状态信息（...）。我们的目标仅仅是引导其导向正确的最终位置即可（...）。

@keyframes tooltips-vert {

to {

opacity: .9;

transform: translate(-50%, 0);

}

}

@keyframes tooltips-horz {

to {

opacity: .9;

transform: translate(0, -50%);

}

}

当用户将鼠标移至具有tooltip属性的可触发元素（响应元素）上时，则必须将这些关键帧应用到提示框上。由于采用了多条数据流来控制显示效果，并且每条数据流对应特定的行为模式，在这种情况下我们便需要在样式表中进行详细设置以确保正确展示。

使用:hover将控制传递给动画

[tooltip][flow^="up"]:hover::before,

[tooltip][flow^="up"]:hover::after,

[tooltip][flow^="down"]:hover::before,

[tooltip][flow^="down"]:hover::after {

animation:

tooltips-vert

300ms

ease-out

forwards;

}

[tooltip][flow^="left"]:hover::before,

[tooltip][flow^="left"]:hover::after,

[tooltip][flow^="right"]:hover::before,

[tooltip][flow^="right"]:hover::after {

animation:

tooltips-horz

300ms

ease-out

forwards;

}

我们无法对 display 属性实施动画效果；然而可以通过利用 opacity 属性，在提示框中添加渐进式显示效果。另外一种方法是应用 transform 动作于 transform 属性上，在这种情况下可以让提示框呈现轻微动态效果，并使被触发的元素仿佛被引导至某个位置

核心forward关键词在动画声明中表明了当完成时不会重置而是保持结束状态

棒极了！我们在这个教程里已经覆盖了很多，一堆提示框效果。

我们仅触及了用CSS制作提示框的皮毛。好好珍惜它们吧！不断尝试调整并制作出属于你自己的独特样式表！