html - 文本中没有换行符的工具提示(仅限 css)

Question

我想在我网站的文本中包含多个工具提示。我尝试同时使用 span 和 div 标签来制作仅包含 CSS 的工具提示，并且它在大多数情况下都有效，但是我无法正确定位工具提示文本。它应该出现在悬停词上方，但目前它只出现在左侧下方的一行中。我的代码:

.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}

.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
}

.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}

<p>Lorem ipsum dolor sit amet, 
    <span class="tooltip">  consectetuer<span class="tooltiptext"> Some Text</span></span> 
adipiscing elit. Aenean commodo ligula eget dolor.</p>

这个问题有什么解决办法吗？

Answer 1

我想你想要这样的东西。

p {
  padding:10px;
}

.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}

.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
left:50%;
top:-19px;
transform:translateX(-50%);
width:100%;
text-align:center;
}

.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}

<p>Lorem ipsum dolor sit amet, 
    <span class="tooltip">  consectetuer<span class="tooltiptext"> Some Text</span></span> 
adipiscing elit. Aenean commodo ligula eget dolor.</p>