如何使一个解释文本框显示当访问者悬停在一个元素?

Question

你们都看到了当访问者悬停在特定元素上时出现的解释性文本框，我想在我的网页上添加一些类似的表数据，它解释了这些表数据的含义。但是，我不想从头开始创建一个包含文本的新div、一个显示该div的函数和触发该函数的onmouseover-onmouseout事件(做这么简单的事情太复杂了)。有什么更简单快捷的方法吗?也许类似于img标签中的alt属性?

Answer 1

我认为你可以用伪元素和数据属性来实现这个技巧。

[data-test] {
border: 1px solid black;
position: relative;
}
[data-test]:hover::before {
content: attr(data-test);
position: absolute;
left: 5px;
top: calc(100% + 5px);
padding: 5px 10px;
border-radius: 2px;
background: black;
color: white;
font-size: 0.8em;
}

<div data-test="tootip">Hover me</div>