Html 如何按内容设置宽度？

我有一个图标：

在出现工具提示的悬停状态下：

正如您所看到的，问题在于它的宽度是由父元素决定的，是否有可能工具提示的宽度会由它的内容自动决定

HTML:

附加说明

---

还有其他的词，所以我不能自己设置宽度。

默认情况下，子元素将保留在其父元素中。这是通过包装内容和/或展开父元素来实现的

---

在这种情况下，父元素将展开以包含子元素，因为父元素上没有显式设置宽度。为了使子元素看起来超出父元素，您需要设置父元素的宽度，以便在子元素变得太宽时不会扩展，然后需要将子元素的宽度设置为比其父元素宽。然后可以指定

overflow:visible以允许子元素完全显示，即使它们延伸到父元素之外。
何时实际显示工具提示？尝试删除
左侧：0；右：0
和
宽度：100%
@ExplosionPills在悬停图像上，但您没有任何
：悬停
规则，我可以see@user1692333jsfiddle.net。展示一个活生生的例子将极大地帮助其他人在这方面帮助你。最有可能的是绝对定位会解决这个问题。。
<div class="icon">
    <span class="tooltip">Debian: 20%</span>
    <span class="icon-lin-debian" style="opacity:0.2"></span>
</div>

div.icon{
    position:relative;
    display: inline-block;
}

span.tooltip {
    display: none;
    position: absolute;
    line-height: 20px;
    width: 100%;
    left:0;
    right:0;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    background: #000;
    border: 1px solid #353535;
    border-radius: 5px;
    top: -45px;
    z-index: 100;
}

span.tooltip:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #353535 transparent transparent transparent;
    top: 40px;
    left: 20px;
    z-index: 100;
}