原文：https://webdesign.tutsplus.co...原文：JaseSmith图像和标题、工具提示是增强用户界面的好方法。现在，让我们制作几个动画工具提示，只用HTML和CSS。示例以下是我们接下来要做的事情：http://jsfiddle.net/kcschaefe...在我们深入研究代码之前，让我们看看我们的意图是什么。主要目的是提供一种添加工具提示的简单方法，以便我们稍后可以通过添加自定义工具提示属性来完成此操作。可见文本或图标等如果您正在寻找符合508的工具提示，或需要包含容器碰撞检测和/或HTML与纯文本的内容，请注意有关辅助功能和功能的说明智能提示框，还有很多实用的第三方脚本方案可以满足你的要求。“使用JavaScript制作完全可访问的交互式组件势在必行”-SaraSoueidan，制作完全可访问的帮助工具提示......比你想象的更难本教程并未专门解决可访问性需求。您了解您的用户以及他们的需求，因此请记住也要考虑他们在这方面的需求。让我们设定一些期望不需要JavaScript我们将使用属性选择器（而不是类名）和CSS内置模式匹配将代码添加到现有的DOM元素（不需要在标签中添加新元素）示例是无前缀的（如有必要，为您的目标浏览器添加供应商前缀）假设鼠标悬停/悬停触发的工具提示在调用时只是纯文本工具提示（不支持HTML，图像等）提示框时，有一个巧妙的动画，老司机要开车了！等一下。我们还得先处理一个问题，就是“不需要额外的标签”。毕竟，它很巧妙。我们的工具提示确实不需要额外的DOM元素，因为它们完全基于我们可以通过CSS控制的伪元素（::before和::after）。如果您已经为另一个样式集中的某个元素使用了伪元素，并且想要向该元素添加工具提示，则可能需要进行一些重构。没有什么能比得上小费盒的盛会了！等等小反派！还有一个警告：CSS定位。为了让工具提示正常工作，它们的父元素（在我们添加工具提示之后）需要是position:relative或position:absolute或position:fixed，基本上任何东西，只要它不是position:static—这是默认的浏览器分配给几乎所有元素的定位模式。工具提示是绝对定位的，所以他们需要知道在什么范围内他们的绝对值是有意义的。默认定位指令static不声明其边界，也不为相对定位提供工具提示上下文。因此，工具提示将使用具有已声明边界的下一个、最接近的父元素。您还需要根据您使用工具提示的方式来决定最合适的定位命令。本教程假设父元素是postion:relative如果您的UI依赖于绝对定位的元素，则在该元素上部署工具提示也需要进行一些重构（额外的标签）。开始吧。属性选择器：快速回顾大多数CSS规则给人的印象是它们是用类名编写的，例如.this-thing，但CSS有几种类型的选择器。我们整洁的工具提示将使用属性选择器——也就是方括号表示法。[foo]{背景：rgba(0,0,0,0.8);color:#fff;}当浏览器看到类似这样的内容时：Checkitout!浏览器会知道，它需要应用[foo]规则，因为标签有一个名为foo的属性.在此示例中，跨度本身将具有半透明的黑色背景和白色文本。HTML元素有各种内置属性，但我们也可以赋予自己的属性。像foo或tooltip。默认情况下，HTML不知道这些东西是什么意思，但是有了CSS，我们可以告诉HTML这些自定义属性是什么意思。为什么要使用属性选择器？稍后我们将使用属性选择器，主要用于以分离为重点的目的。使用属性而不是类名不会让我们在冗长方面获得更多好处，类和属性的冗长程度相同。然而，通过使用属性，我们可以将我们的内容保持在一起，因为HTML属性可以有值，而类名没有。在此示例的代码中，让我们权衡类名.tooltip与属性[tooltip]。类名是[class]属性的取值之一，tooltip属性可以存储一个值，也就是我们要显示的文字。loremipsumloremipsum现在让我们看看tooltipalchemy我们的tooltip会用到两个有两个不同的属性：tooltip：该属性存储工具提示框的内容（纯文本字符串）flow：可选；该属性允许我们控制工具提示框的显示方式。我们可以支持多种方向，但我们将介绍4种常见方向：上、左、右、下现在，让我们为所有工具提示做好准备。第1-5步中的规则适用于所有工具提示，无论我们为flow属性赋予什么值。不同的流量值步骤6-7是不同的。1)Relativity这个用在提示框的父元素上。让我们给出一个定位指令，这样tooltip的组件（即::before和::after伪元素）的绝对定位可以参考父元素定位，而不是整个页面或祖父元素或DOM其他树上方的外围元素定位为参考。[tooltip]{position:relative;}2)伪元素准备时间准备伪元素的时间到了。在这里，我们要在::before和::after上设置公共属性。content属性实际上使伪元素起作用，但我们稍后会讨论它。[tooltip]::before,[tooltip]::after{line-height:1;用户选择：无；指针事件：无；位置：绝对；显示：无；不透明度：0；/*意见*/text-transform:none;font-size:.9em;}3)丁克帽我不知道丁克帽是否有意义，我只是一直这么称呼它。它是一个小而尖的三角形，通过指向其调用者，使工具提示具有对话气泡的感觉。请注意，我们在边界颜色中使用了透明；由于着色是根据提示框的流量值来的，颜色是后面加的。[tooltip]::before{内容：'';z-指数：1001；border:5pxsolidtransparent;}content:'';声明中的值是一个空字符串，这不是拼写错误。在字符串内部，我们什么都不想要，但是我们需要这个属性，这样伪元素才能存在。为了生成一个三角形，我们定义了一个实现边框，它为空框（没有内容）增加了一些厚度，没有设置框的宽度和高度，只是给框的每一边一个边框颜色。4）泡泡！这就是重点。注意content:attr(tooltip)部分说：“这个伪类应该使用tooltip属性的值作为这个伪类的内容。”这就是为什么使用属性而不是类名这么好。[tooltip]::after{content:attr(tooltip);/*魔法！*/z-index:1000;/*其余大部分是个人意见*/font-family:Helvetica,sans-serif;居中对齐;/*让内容设置工具提示的大小，但这也可以防止它们令人讨厌*/min-width:3em;最大宽度：21em；空白：nowrap；溢出：隐藏；溢出：省略号；/*工具提示气泡的可见设计*/padding:1ch1.5ch;边界半径：.3ch；盒子阴影：01em2em-.5emrgba(0,0,0,0.35);#333；color:#fff;}注意丁克帽和气泡的z-index值。这些值可以是任意的。但请记住，z-index值是相对的。解释：z-index为1001的元素位于z-index为3的元素内部。这只是意味着，在z-index:3容器内部，1001元素是最顶层元素。气泡的z-index应至少比丁克帽的z-index低一个档次。如果它与丁克帽的高度相同或更高，那么如果您在工具提示中使用框阴影，您最终会在丁克帽上看到不一致的颜色效果。5)交互操作我们的提示框是通过将鼠标移动到带有提示框的元素上来激活的。就是这样。[tooltip]:hover::before,[tooltip]:hover::after{display:block;}如果您回顾第2部分中的样式部分，您会看到我们为工具提示组件使用了不透明度：0;并显示：无；.我们这样做是为了在工具提示显示和隐藏时使用CSS动画。display属性不能动画，但是opacity属性可以！我们把动画留到最后。如果对动画提示框不感兴趣，去掉opacity:0即可；在第2步中忽略第7步。适用于所有工具提示的最后一件事是，如果工具提示没有内容，则有一种方法可以抑制工具提示。如果您使用某种动态系统（Vue.js、Angular或React、PHP等）来生成工具提示，我们不需要愚蠢的空白气泡！/*不显示空工具提示*/[tooltip='']::before,[tooltip='']::after{display:none!important;}6)流程控制这一步会变得更复杂，因为我们'我们将使用一些不太常见的选择器来帮助根据流值（或无流属性）定位我们的工具提示。“Circle-K门口有些奇怪”——TedTheodoreLogan在我们编写样式之前，让我们看看我们将要使用的一些选择器模式。[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before{/*...properties:values...*/}这是告诉浏览器：“对于所有具有tooltip属性但没有flow属性的元素，或者具有值以'up'开头的flow元素：将这些样式应用于此类元素的::before伪元素。“我们正在使用这里有一个模式，这样这些东西就可以扩展到其他流，而无需重复那么多CSS。模式flow^="up"使用^=（开始）匹配器。使用此模式，如果您想添加额外的流程控制，您还可以在右上和左上方向（在代码中）应用样式。我们不会在这里讨论这些流控制，但您可以在我在CodePen上的原始工具提示演示中看到如何使用它们。以下是教程中提到的4个流对应的CSS代码块。上/*只有::before*/[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before{bottom:100%;边框底部宽度：0；border-top-color:#333;}/*只有::after*/[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after{bottom:calc(100%+5px);}/*::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%;边框顶部宽度：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%;右边框宽度：0；左边框颜色：#333；左：计算（0em-5px）；transform:translate(-.5em,-50%);}[tooltip][flow^="left"]::after{到p：50%；右：计算（100%+5px）；转换：翻译（-.5em，-50%）；}right[tooltip][flow^="right"]::before{top:50%;左边框宽度：0；右边框颜色：#333；右：计算（0em-5px）；transform:translate(.5em,-50%);}[tooltip][flow^="right"]::after{顶部：50%;左：计算（100%+5px）；transform:translate(.5em,-50%);}7)动画化一切都是神奇的动画化可以做到：让用户感到舒服。让用户感受到您的用户界面的空间。注意要看什么。软化用户界面的黑白硬效果。我们的工具提示属于最后一类。如果只是让文本气泡出现然后突然消失还不够理想，我们可以让它更柔和一些。关键帧(@keyframes)我们需要两个关键帧(@keyframes)来制作动画。上/下工具提示使用tooltips-vert关键帧，左/右工具提示使用tooltips-horz关键帧。请注意，在这些关键帧中，我们仅为工具提示定义所需的终止状态。我们不需要知道它们来自哪里（工具提示本身有状态信息）。我们只想控制他们去哪里。@keyframestooltips-vert{到{不透明度：.9；转换：翻译（-50%，0）；}}@keyframestooltips-horz{到{不透明度：.9;转换：翻译（0，-50%）；现在，当用户的鼠标移到触发元素（具有[tooltip]属性的元素）上时，我们需要将这些关键帧应用于工具提示。由于我们使用不同的流程来控制工具提示的显示方式，因此我们需要在样式中定义它们。使用:hover将控制传递给动画[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-vert300msease-outforwards;}[tooltip][flow^="left"]:hover::before,[tooltip][flow^="left"]:hover::after,[tooltip][flow^="right"]:hover::before,[tooltip][flow^="right"]:hover::after{animation:tooltips-horz300msease-outforwards;}我们不能为display属性设置动画，但是我们可以通过操作opacity属性给提示框添加淡入效果。我们还可以为transform属性设置动画，它可以为工具提示添加细微的动作，触发元素就像它飞入某个点一样。主要的forward关键字在动画的声明中，它告诉动画在结束时不要重置，而是停留在结束的地方。伟大的结论！我们在本教程中介绍了很多内容，包括一堆工具提示效果。http://jsfiddle.net/kcschaefe...我们只触及了使用css作为工具提示的皮毛。享受它们并继续尝试制作自己的食谱！
