【发布时间】：2021-06-13 23:10:22
【问题描述】：
目标：我正在尝试创建一个工具提示，如果您将鼠标悬停在文本上，应该会出现一个工具提示。基本上，我想在 w3schools 重新创建这个示例。这是链接https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip。
我的代码：
render() {
return (
<div >
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class = "tooltip">
Hover over me
// <img src = "assets/images/react.png" alt="React / React Native" className = "icons"></img>
<span class = "tooltiptext">
Tooltip text
</span>
</div>
</div>
);
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip, .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
right: 100px;
z-index: 1;
/* bottom: 125%; */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip, .tooltiptext::after {
content: "";
position: absolute;
/* top: 100%; */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover, .tooltiptext {
visibility: visible;
opacity: 1;
}
旁注：我知道我在 CSS 中注释掉了一些定位样式，以便更容易找到。另外，我更喜欢将鼠标悬停在技术图标上并让它显示其名称，但首先我认为最好从简单开始。
结果：“悬停在我身上”文本和工具提示不显示；它看起来是白色的，所以你看不到它。但是，如果我将鼠标悬停在工具提示文本上，两个元素都会显示。我可以通过开发者工具弄清楚这些元素的位置。此外，工具提示无法正确显示。
【问题讨论】：
-
请注意，在 JSX 中设置类属性时，您应该使用
className而不是class。