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 に答える