如何在CSS中定义工具提示文本？
我希望拥有完全由CSS指定的工具提示文本，而不是在我的应用程序的dynamic-html部分中，这样样式和代码可以完全分离(我认为工具提示消息可能是UX部门的关注点，或者至少是第三方用户，不应该在JavaScript生成代码中黑客攻击来实现工具提示的更改)。
预期下面的代码将无法完成工作，但根本无法工作：
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:after {
content: "foo bar";
}
.tooltip:hover .tooltip:after {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
</div>
</body>
</html>特别是，虽然我已经定义了“后”内容，但它没有显示在“悬停”中：
.tooltip:after {
content: "foo bar";
}
.tooltip:hover .tooltip:after {
visibility: visible;
}作为参考，这是从w3schools实例修改的
不确定这个旧的答案是否仍然适用，因为它可能先于伪元素：工具提示，仅限于CSS，使用类在鼠标上方显示文本工具提示以定义文本
回答 3
Stack Overflow用户
发布于 2020-03-05 20:04:30
就这样吧：
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:after {
content: "foo bar";
position: absolute;
top: -30px;
right: 0;
left: 0;
display: none;
text-align: center;
background-color: #000;
color: #fff;
border-radius: 4px;
padding: 2px;
}
.tooltip:hover:after {
display: block;
}<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>
如果要更改工具提示本身的位置/外观，请更改此部分的样式：.tooltip:after {}
Stack Overflow用户
发布于 2020-03-05 20:10:00
我相信你的问题是这个选择者：
.tooltip:hover .tooltip:after
此CSS选择器应用于具有“工具提示”类的元素，该类位于具有“工具提示”类的父元素中。你可能想：
.tooltip:hover::after
(请注意，这不完全适用于示例代码，因为它将样式应用于.tooltip .tooltiptext，而该样式也不存在。你可能也是指.tooltip::after。)
Stack Overflow用户
发布于 2020-03-05 20:20:09
下面是您问题中示例的一个工作版本。
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip:after {
opacity: 0;
}
.tooltip:hover:after {
content: "foo bar";
opacity: 1;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 0 6px 6px 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
margin: 0.5rem 0 0 0.5rem;
z-index: 1;
}<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>
https://stackoverflow.com/questions/60552988
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号