文本内的工具提示，没有换行符（仅适用于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>