没有换行符的文本中的工具提示（仅限 css）答案

【问题标题】：Tooltip within text without line break (css only)没有换行符的文本中的工具提示（仅限 css）
【发布时间】：2019-02-21 18:17:20
【问题描述】：

我想在我的网站上的文本中包含多个工具提示。我曾尝试同时使用 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>

有没有办法解决这个问题？

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

是的，这就是我想要的，但是还有一种方法可以使包含工具提示文本的 div 的宽度大于可悬停文本？我不确定这是否可行，因为 .tooltiptext 是 .tooltip 的子元素。
欢迎来到 stackoverflow @Charlie 在同一个帖子中提出多个问题通常不是 Stackoverflow 的礼仪，这是一个简单的原因，如果有人在谷歌中搜索它，在 cmets 中很难找到它。但是你所要做的就是改变你的宽度值。（顺便说一句，值可以超过 100%，或者你只是给它一个定义的尺寸，或者添加更多的填充。有很多方法）这个答案解决了你发布的原始问题，如果你发现它也是正确的，你应该将其标记为正确。跨度>
@soulshined 谢谢你的帮助解释队友 :)