css - 父 div float 干扰子 div 的宽度

Question

我想做的是有一个非常简单的工具提示，它使用 jQuery 在悬停时隐藏/显示。

( jsFiddle demo of the problem )

为此，我所做的是在 li 上放置一个将有工具提示的 div。这个 div 绝对定位在每个 li 的顶部。工具提示 div 将包含不同长度的文本，所以我不能只预先定义它的宽度。我只希望宽度根据文本长度一直延伸。

我的问题是，当我 float li 时，div 也会 float (或看起来如此)，因此占用 float li 的宽度。工具提示现在变得和 li 的宽度一样窄，我不希望发生这种情况。

这是 HTML:

<ul id="images">
    <li><img src="[some image]" /><div class="tooltip">Some text that is quite long.</div></li>
    <li><div class="tooltip">Some text that is quite small.</div><img src="[some image]" /></li>
    <li><img src="[some image]" /></li>
    <li><img src="[some image]" /></li>
</ul>

这是 CSS:

#images li {
    list-style: none;
    margin-left: 10px;
    position: relative;
}

.tooltip {
    color: #FFF;
    clear: both;
    background: #000;
    padding: 10px;
    font: 11px Arial, Helvetica, sans-serif; 
    -moz-border-radius: 5px;
    position: absolute;
    top: -50px;
    display: none;
    border: 2px solid #999;
}

我希望有人能帮我解决这个问题。

Answer 1

您始终可以计算出准确的宽度。

例如，您在页面之外创建一个工具提示 div，如

<div class="tooltip" id="calc"></div>

和

#calc{
  top:-100px;
  left:-100px;
}

如果加上下面的js，会很好显示

$(".tooltip","#images").each(function(){
  $("#calc").text($(this).text());
  $(this).width($("#calc").width());
});

更新 fiddle here