0

我有一个图标:

在此处输入图像描述

悬停时出现工具提示:

在此处输入图像描述

如您所见,问题在于它的宽度是由父元素决定的,工具提示的宽度是否可能会自动由它的内容决定?

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
还有别的说法,所以我不能自己设置宽度。

4

1 回答 1

0

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

在这种情况下,父元素扩展为包含子元素,因为父元素上没有明确设置宽度。为了让子元素看起来超出父元素,您需要设置父元素的宽度,以便在子元素太宽时不会扩展,然后您需要设置子元素'宽度比他们父母的宽。然后,您可以overflow: visible;在父元素上指定以允许子元素完全显示,即使它们延伸到父元素之外。

于 2013-02-18T01:07:05.387 回答