html - 内联 block 内的绝对 div，相对父 div 占用兄弟的宽度

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

基本上，工具提示似乎采用了 sibling 的宽度——Boooo!我希望工具提示根本没有宽度。

如果我从容器中删除 display: inline-block; ，问题不再存在，但我需要容器是内联 block 。所以我的问题是如何将绝对定位的 div 添加到内联 block 、相对定位的父 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>