多列布局上的绝对定位工具提示

Question

我正在尝试将绝对定位的工具提示添加到简单的 CSS 三列布局中 - 但工具提示总是被后续列截断。

如果工具提示高于或低于包装元素的上限或下限，它也会跨列中断。

是否有任何方法可以确保工具提示始终位于列的顶部 - 并且它永远不会跨越列并且允许在包装元素的边界之外运行？

编辑 - 我应该澄清该列表的长度未知/可变，并且我宁愿避免不得不依赖 Javascript 来格式化列表（例如，将其拆分为 3 和包装每个部分）如果可能的话。列表也应该垂直环绕，就像在 sn-p 中一样，而不是水平跨列。

.wrapper {
  display: block;
  width: 50%;
  background-color: white;
  border: 2px solid red;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 2em;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  -webkit-column-rule: 2px solid red;
  -moz-column-rule: 2px solid red;
  column-rule: 2px solid red;
  margin-bottom: 5em;
}

.wrapper span {
  position: relative;
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  padding: 1em;
  cursor: pointer;
  transition: 0.2s color linear
}

.wrapper span:hover {
  color: red;
}

.wrapper span:hover .tooltip {
  display: block;
}

.tooltip {
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  padding: 1em;
  border: 2px solid black;
  color: white;
  background-color: lightgray;
}

<div class="wrapper">
  <span>item 1 <p class="tooltip">Tooltip!</p></span>
  <span>item 2 <p class="tooltip">Tooltip!</p></span>
  <span>item 3 <p class="tooltip">Tooltip!</p></span>
  <span>item 4 <p class="tooltip">Tooltip!</p></span>
  <span>item 5 <p class="tooltip">Tooltip!</p></span>
  <span>item 6 <p class="tooltip">Tooltip!</p></span>
  <span>item 7 <p class="tooltip">Tooltip!</p></span>
  <span>item 8 <p class="tooltip">Tooltip!</p></span>
  <span>item 9 <p class="tooltip">Tooltip!</p></span>
  <span>item 10 <p class="tooltip">Tooltip!</p></span>
</div>

Answer 1

我能找到的唯一不涉及 javascript 的解决方案是使用丑陋的 hack - 通过将 translateZ(0); 添加到工具提示中，它们出现在其他列的“上方”。

这并不理想，但根据我的研究，似乎还没有一种方法可以让 CSS 列之间溢出。

Answer 2

问题是您的工具提示是position: absolute，但跨度不是。如果您希望它以这种方式工作，您还必须制作所有跨度 position: absolute。

我会这样做：

不要使用这些 CSS 属性：

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
column-gap: 2em;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-webkit-column-rule: 2px solid red;
-moz-column-rule: 2px solid red;
column-rule: 2px solid red;

我会将它分成三个<div class="wrapper"> 元素，如下所示：

<div class="wrapper">
...
</div>
<div class="wrapper">
...
</div>
<div class="wrapper">
...
</div>

并更改 .wrapper CSS 以具有以下属性：

display: inline-block;
float: left;

所以他们并排坐着。

如果您这样做，工具提示的position: absolute 将始终位于 HTML 的其余部分之上。

---

编辑：服务器端渲染伪代码示例（无需 JavaScript）：

int column = 1;

var firstColumn, secondColumn, thirdColumn;
foreach (var item in items) {
    if (column == 1) { firstColumn.Add(item); column = 2; continue; }
    if (column == 2) { secondColumn.Add(item); column = 3; continue; }
    if (column == 3) { thirdColumn.Add(item); column = 1; continue; }
}

<div class="wrapper">
// Loop through firstColumn, adding spans for each
</div>

<div class="wrapper">
// Loop through secondColumn, adding spans for each
</div>

<div class="wrapper">
// Loop through thirdColumn, adding spans for each
</div>