我有一个图标:
悬停时出现工具提示:
如您所见,问题在于它的宽度是由父元素决定的,工具提示的宽度是否可能会自动由它的内容决定?
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;
}
PS
还有别的说法,所以我不能自己设置宽度。