Question

考虑此标记和样式：

.container {
  border: 1px dashed red;
  position: relative;
  display: inline-block;
}

.sibling {
  border: 1px dashed green;
}

.tooltip {
  border: 1px dashed purple;
  position: absolute;
  max-width: 100px;
}

<div class="container">
  <div class="sibling">
    sibling
  </div>
  <div class="tooltip">
    Some text look how skinny it is
  </div>
</div>

Here's a codepen with the exact stuff

基本上，工具提示似乎占据了兄弟姐妹的宽度-噢！我希望工具提示根本没有宽度。

如果我从容器中删除display: inline-block;，则不再存在此问题，但我需要将容器内联。因此，我的问题是如何在相对位置相对的父div内联块中添加绝对位置的div，而绝对div不会在同级div的宽度上破坏其文本。

修改

如果需要，工具提示还应该支持最大宽度，因此white-space: nowrap;将不起作用：（

Answer 1

您是否尝试过简单地从父级删除position: relative？

假设您希望在悬停在同级上时显示工具提示，则可以使用以下内容：

.container {
  border: 1px dashed red;
  display: inline-block;
  margin: 50px;
  position: relative;
}

.sibling {
  border: 1px dashed green;
}

.tooltip {
  display: none;
  position: absolute;
  width: 100vh;
}

.tooltip .content {
  border: 1px dashed purple;
  display: inline-block;
  padding: 3px;
}

.sibling:hover ~ .tooltip {
  display: block;
}

<div class="container">
  <div class="sibling">
    sibling
  </div>
  <div class="tooltip">
    <div class="content">
      Some text
    </div>
  </div>
</div>

<div class="container">
  <div class="sibling">
    another sibling
  </div>
  <div class="tooltip">
    <div class="content">
      Lorem ipsum dolor sit amet, no vivendum iudicabit per, libris elaboraret ei qui. Mei cibo mollis repudiandae et. Vix ne unum docendi rationibus, doming doctus scripta mei ea. Sed ne zril integre sanctus, cu doming semper omittantur mea. Te adhuc falli ius. Eam ad ceteros nostrum perpetua.
    </div>
  </div>
</div>

Answer 2

 .tooltip {
      border: 1px dashed purple;
      position: absolute;
      white-space:nowrap; /* added */
    }

Answer 3

您是不是要在工具提示中打开工具提示？只需将white-space: nowrap;添加到.tooltip。

Answer 4

尝试将工具提示CSS更新为：

.tooltip {
  border: 1px dashed purple;
  position: absolute;
  max-width: 300px;
  white-space: nowrap; /* add this property.*/
  overflow: hidden; /* add this property.*/
}

或将CSS更新为

.tooltip {
  border: 1px dashed purple;
  position: absolute;
  width: 300px;
}

将max-width属性更改为width属性。

内联块中的绝对div，相对父div占用兄弟的宽度

4 个答案: