Question

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

要做到这一点，我所做的就是在li上设置一个工具提示。这个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>

这是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

块元素扩展到其容器的宽度。 Float不会改变这一点。

如果您想在工具顶部使用不同的宽度，请使用width并指定宽度（以像素为单位）。

如果你想走一条更漂亮的路线，你可以定义宽度和高度，检查溢出并使用JavaScript扩大它。

Answer 2

您可以随时计算确切的宽度。

例如，您在页面之外创建一个工具提示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());
});

更新了小提琴here

Answer 3

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

$('#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。

父div浮动会干扰子div的宽度

3 个答案: