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

Question

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

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

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

编辑 - 我应该澄清一下，列表的长度为 unknown/variable，我宁愿避免依赖 Javascript如果可能，格式化列表（例如将其分成 3 部分并包装每个部分）。该列表还应像代码段中那样垂直环绕，而不是水平跨列。

.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

问题是您的工具提示是 position: absolute 但 span 不是。如果您希望它以这种方式工作，您还必须制作所有跨度 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>

Answer 2

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

这并不理想，但根据我的研究，似乎还没有允许 CSS 列之间溢出的方法。

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

Absolutely positioned tooltip over Multi-column Layout

html

css

multiple-columns

css-multicolumn-layout