Как настроить ширину по содержимому?

Question

У меня есть значок:

На парениях Wich появляется всплывающая подсказка:

Как вы можете видеть, что проблема заключается в том, что это ширина родительского элемента, является возможным что ширина всплывающей подсказки будет автоматически по содержанию?

HTML:

<div class="icon"> 
    <span class="tooltip">Debian: 20%</span> 
    <span class="icon-lin-debian" style="opacity:0.2"></span> 
</div> 

CSS:

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; 
} 

P.S. Есть и другие слова, поэтому я не могу установить ширину отдельно.

Answer 1

По умолчанию дочерние элементы остаются внутри своих родительских элементов. Это достигается путем переноса содержимого и/или путем расширения родительского элемента.

В этом случае родительский элемент расширяется, чтобы включать дочерние элементы, поскольку на родительской ячеек нет явной ширины. Чтобы получить дочерние элементы, чтобы они выходили за пределы родительского элемента, вам нужно будет установить родительский элемент шириной ’ s, чтобы он не расширялся, когда дочерние элементы становятся слишком широкими, и тогда вам нужно будет установить дочерний элемент элементы ’ ширина будет шире, чем их родители ’. Затем вы можете указать overflow: visible; в родительском элементе, чтобы позволить детям полностью отображаться, даже если они распространяются за пределы родителя.