Css 父div float干扰子div'；s宽度

我试图做的是使用jQuery提供一个非常简单的工具提示，在悬停时隐藏/显示

（）

为了做到这一点，我所做的就是在李的脸上放一个div，上面会有一个工具提示。这个div绝对位于每个li的顶部。工具提示div将包含不同长度的文本，因此我不能预先定义其宽度。我只希望宽度根据文本长度一直延伸

我的问题是，当我浮动li时，div也会浮动（或者看起来是这样），因此会占用浮动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>

---

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

块元素扩展到其容器的宽度。浮动并不能改变这一点

如果要在工具顶部使用不同的宽度，请使用

width

，并以像素为单位指定宽度

---

如果你想走一条更奇特的路线，你可以定义一个宽度和高度，检查溢出并使用JavaScript将其加宽。

你可以在之前计算出确切的宽度

例如，在页面外部创建工具提示div，如

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

如果您添加以下js，它将很好地显示

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

---

更新的小提琴

我认为你需要改变一下你的方法！与使用与实际工具提示相同的div不同，您可以在具有绝对位置的div中使用其HTML内容，并根据悬停对象的位置设置其位置

$('#images li').hover(function() {
  $('#myTooltip').html($(this).find('.tooltip').html());
  /* Here you need to set #myTooltip absolute position. 
     based on the position of $('this') or the mouse position
     with an offset */

}, function() {
  $('#myTooltip').hide();
});

---

其中#myTooltip是在列表外定义的具有绝对位置的div。

有点离题，但为什么在

中有一个

？这不是有效的HTML。您不能只执行

？这在我尝试过的任何地方都有效，这意味着你不必担心像这样的问题…@Artyom:这是一个打字错误。它应该是

@DaveRandom：我想做的是将样式元素放在工具提示div中（如粗体、颜色、斜体）。这就是我使用div.@catandmouse的原因，

title

只提供非常基本的文本tooltips@Py谢谢但我只是想知道为什么在“.tooltip”旁边有一个“#image”选择器。没有它似乎工作得很好。这有什么原因吗？在这里是为了避免在每个对话框中包含

#calc.tooltip

div。这只是一个小细节，其实并不重要，因为这只是为了避免计算一个div。

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

$('#images li').hover(function() {
  $('#myTooltip').html($(this).find('.tooltip').html());
  /* Here you need to set #myTooltip absolute position. 
     based on the position of $('this') or the mouse position
     with an offset */

}, function() {
  $('#myTooltip').hide();
});