Question

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

如果工具提示在包装元素的上限或下限之上或之下运行，则工具提示也会突破列。

有没有办法确保工具提示始终位于列的顶部 - 而且它永远不会跨列断开并允许在包装元素的边界之外运行？

编辑 - 我应该澄清一下，列表将是未知/可变长度，我宁愿避免依赖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

我能找到的唯一不涉及javascript的解决方案是使用丑陋的黑客 - 将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>

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

2 个答案: