只用 css 再加亿点点 html 就能实现一个 tooltip开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

tooltip, 常用于展示鼠标 hover 时的提示信息。

我们在很多组件库中都看到过 tooltip，比如 element-plus 的 tooltip。

那如何在不使用组件库或者外部依赖的情况下，用 css 来实现 tooltip 呢？

可以利用 HTML5 的 data-* 属性和 css 的 attr 来实现。

让我们来先看一个实现的示例：

可以看到当鼠标滑过「hover me」的文字时，文字下方会出一个提示信息。

接下来我们来了解一下 data-* 属性是如何实现该效果的。

在 HTML 中加入 data-* 属性

首先要做的第一件事情，就是设置 tooltip 的 html 代码：

<div class="demo">
  <span class="tooltip" data-tooltip="CSS 实现 Tooltip">hover me</span>
</div>

在 span 标签加上 data-tooltip 的属性，就可以把它当作 HTML 属性直接使用，data-tooltip 的值就是要显示的提示文字。

data-tooltip 的 tooltip 名字可以任意设置，只要前面的格式以 data- 为开头即可。

接下来，我们需要在 hover 的时候获取到要显示的提示文字。

CSS 的伪元素是个很强大的东西，我们可以利用它做很多事情，通常为了做一些效果，content: " " 多半会留空，但在这里，我们会使用 attr 来获取数据。

CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

.demo .tooltip:before {
  content: attr(data-tooltip);
}

在 attr 里面获取到我们在 html 新增的 data-tooltip 属性，这样伪元素 :before 就会得到该值。

可以使用 Unicode 字符显示多行 tooltip。

在想要换行的地方使用用 &#xa，这样文字就会自动换行了:tada: :100:。

<div class="demo">
  <span class="tooltip2" data-tooltip="CSS 实现 Tooltip &#xa 第二行文字">hover me</span>
</div>

不能直接在 tooltip 文字中使用 <br/> 进行换行哦。

只用 css 加一点 html，一个简单的 tooltip 就完成了。

更重要的是，你可以自由设计这个显示的效果，比如，加个彩蛋😝

css yyds！！！