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

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

问题是你的工具提示是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>