使用CSS内容的属性实现工具提示效果.

当用户需要一个漂亮的图标来提供其他文本信息时，或者在单击按钮后需要确认是否单击了按钮时，或者在需要确认是否单击了按钮时或带有图片和字幕的复活节彩蛋，提示这是增强用户界面的好方法. 现在，让我们创建一些的提示框，仅此而已，只有HTML和CSS.

样品

这是我们稍后要做的:

请参阅CodePen上xianzhiding（@xianzhiding）的Pen CSS Tooltip Magic.

在沉浸于编写代码的过程之前，让我们看一下我们的意图. 主要目的是获得一种添加工具提示的简单方法，以便以后可以通过添加自定义工具提示属性来做到这一点.

visible text or icon, etc.

让我们设定一些期望. 旧驱动程序将要驱动！

哦，等等. 我们必须首先处理一个问题，即“不需要其他标签”. 毕竟，这是非常聪明的. 我们的提示框确实不需要其他DOM元素，因为它们完全基于伪元素（:: before和:: after），并且我们可以通过CSS对其进行控制.

如果您在另一个样式集中使用了元素的伪元素，并且想要在该元素中添加提示框，那么您可能需要进行一些重构.

没有什么可以比作提醒框事件了！

等等. 小坏蛋！另一个警告: CSS定位. 为了使提示框正常运行，需要将其父元素（我们在其后添加提示框）

基本上，只要不定位，任何东西都可以使用: 静态—这是浏览器分配给几乎所有元素的默认定位模式. 提示框是绝对定位的，因此它们需要知道其绝对值在什么范围内有意义. 默认的定位指令static不会声明其边界，也不会为相对定位提供提示框上下文. 因此，在使用提示框后，最近的父元素具有声明的边界.

您还需要根据使用提示框的方式来决定哪种定位指令最合适. 本教程假定父元素是postion: relative. 如果您的UI依赖于绝对定位的元素，则在该元素上部署提示框也将需要一些重构（附加标签）.

开始吧.

属性选择器: 快速浏览

大多数CSS规则都以类名（例如.this-thing）编写，但是CSS具有多种选择器. 我们巧妙的提示框旨在使用属性选择器，即方括号表示法.

[foo] {
background: rgba(0, 0, 0, 0.8);
color: #fff;
}

当浏览器看到类似这样的内容时:

Check it out!

浏览器将知道它需要应用[foo]规则，因为标记具有名为foo的属性. 在此示例中，范围本身将具有半透明的黑色背景和白色文本.

HTML元素具有各种内置属性，但是我们也可以提供自己的属性. 例如，foo或工具提示. 默认情况下，HTML不知道这些含义是什么，但是使用CSS，我们可以告诉HTML这些自定义属性的含义.

为什么要使用属性选择器？

我们稍后将使用属性选择器，主要是为了专注于分离. 就细节而言，使用属性代替类名不会给我们带来更多好处. 类和属性在细节方面是相同的. 但是，通过使用属性，我们可以将内容放在一起，因为HTML属性可以有值，而类名没有值.

在此示例的代码中，权衡类名称.tooltip和属性[tooltip]. 类名是[class]属性的值之一，而工具提示属性可以存储一个值，这就是我们要显示的文本.

lorem ipsum
lorem ipsum

术

我们的工具提示使用两个不同的属性:

现在，让我们为所有提示框做好准备. 无论我们给flow属性赋予什么值，步骤1-5中的规则都将应用于所有提示框. 步骤6-7将区分不同的流量值.

1. 相对论

这在提示框的父元素上使用. 让我们给出一个定位指令，以便可以根据父元素而不是整个页面或祖父母元素来定位提示框组件的绝对位置（即:: before和:: after伪元素）. 或DOM树上方的其他元素用作定位参考.

[tooltip] {
position: relative;
}

2. 伪元素准备时间

是时候准备伪元素了. 在这里，我们需要为:: before和:: after设置通用属性. 真正使伪元素起作用的是content属性，但我们将在后面讨论.

[tooltip]::before,
[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. 丁克帽

我不知道DINK帽子是否有意义，我一直都这么称呼它. 它是一个小尖的三角形，指向其调用方，以为提示框提供对话框气泡的感觉. 请注意，我们在边框颜色中使用了透明色；由于颜色取决于提示框的流量值，因此我们稍后将添加颜色.

[tooltip]::before {
content: '';
z-index: 1001;
border: 5px solid transparent;
}

content: “;声明中的值是一个空字符串，这不是笔误. 在字符串中，我们什么都不想要，但是我们需要此属性来使伪元素存在.

为了生成三角形，我们定义了实现边框，在未设置内容框的宽度和高度的情况下，向空框添加了一定的厚度（不包含内容），只需为框颜色的每一侧提供边框.

4. 气泡！

这是重点. 请注意，内容部分: 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;
}

请注意DINK盖和气泡的z-index值. 这些值可以是任意的. 但是请记住，z-index值是相对的. 说明: z-index为1001的元素位于z-index为3的元素内部. 这仅表示在z-index: 3的容器内，1001元素是最顶部的元素.

气泡的z指数应至少比DINK盖的z指数低一档. 如果高度与DINK相同或更高，则在提示框中使用阴影框，则DINK盖上的颜色效果将不一致.

5. 互动动作

通过在带有提示框的元素上移动鼠标，可以激活提示框. 差不多就是这样.

[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}

如果回头看第2号中的样式部分，您会发现我们使用了opacity: 0;并显示: 无；提示框的组成部分. 我们这样做是为了在显示和隐藏提示框时可以使用CSS效果.

不能对显示属性进行处理，但对不透明度属性可以进行处理！我们将其保留到最后以处理问题. 如果您对提示框不感兴趣，只需删除不透明度: 0;在步骤2中忽略步骤7.

要应用于所有提示框的最后一件事是，如果提示框不包含任何内容，则有一种方法可以隐藏提示框. 如果您使用某种动态系统（Vue.js，Angular或React，PHP等）来生成提示框，则我们不需要笨拙的空白气泡！

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}

6. 流量控制

此步骤将变得更加复杂，因为我们将使用一些不太常用的选择器来帮助我们的提示框基于流量值（或没有流量属性）确定位置.

在编写样式之前，让我们看一下将要使用的一些选择器模式.

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
/* ...
properties: values
... */
}

这是告诉浏览器: “对于具有工具提示属性的所有元素，没有流属性，或者没有流元素，但是其值以'up'开头: 将这些样式应用于此:: before伪-class元素的元素. ”

我们在这里使用一种模式，以便可以将这些内容扩展到其他流，并且这些步骤需要重复很多CSS. 模式流^ =“ up”使用^ =（开始）匹配字符. 如果要添加其他流控制，则通过此模式，您还可以沿左右方向（在代码中）应用样式. 我们将不在这里讨论这些流控件，但是您可以在CodePen上的原始工具提示演示中看到如何使用它们.

以下是与本教程中提到的4个流相对应的CSS代码块.

向上（这是默认方向）

/* ONLY the ::before */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: #333;
}
/* ONLY the ::after */
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 5px);
}
/* Both ::before & ::after */
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::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）. “工具提示” -vert关键帧用于上/下工具提示，而“工具提示-水平”关键帧用于左/右工具提示. 请注意，在这些关键帧中，我们仅定义提示框所需的结束状态. 我们不需要知道它们的来源（提示框本身具有状态信息）. 我们只想控制它们的去向.

@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}

现在，当用户的鼠标移动到触发元素（具有[tooltip]属性的元素）时，我们需要将这些关键帧应用于工具提示. 因为我们使用不同的流来控制提示框的显示，所以我们需要以样式定义它们.

使用: 悬停可将控制权传递给

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[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;
}

我们无法为显示属性设置，但是我们可以通过操作opacity属性来向提示框添加淡入效果. 我们还可以设置transform属性的，从而可以在提示框中添加微妙的动作，并且触发的元素就像飞到某个点一样.

主要的forward关键字位于animation语句中，该语句告诉在完成时不要重置，而要停留在结尾.

太棒了！在本教程中，我们讨论了很多内容，包括一堆提示框效果.

我们仅使用CSS探索了提示框的表面. 享受它们，继续尝试并调制自己的食谱！

©版权属于原作者

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-300792-1.html