在多列 DIV 中使用 CSS 工具提示

Question

我需要在多列 div 中显示特定术语的工具提示，并且我需要它们跨多个浏览器工作。我从w3schools CSS Tooltip 示例开始，它在普通（单列）容器中效果很好。但是对于多列，Chrome 有一些严重的（也许不是破坏交易的）格式问题，而 Safari 失败得很厉害，将工具提示裁剪到它应该出现的列。Firefox 工作正常。

火狐：

铬合金：

苹果浏览器：

我想也许 Safari 正在处理溢出，好像它被设置为隐藏，但如果是这样，我找不到任何方法来改变它的行为。而且我找不到任何解决多列布局中工具提示格式问题的现有问题。

现在我担心我可能不得不硬着头皮编写自定义 javascript 来检测悬停，抓取工具提示的文本，将文本填充到浮动在我页面内容上方的 div 中，显示正确定位的 div与链接的关系，并在鼠标移出链接时再次隐藏它。显然，如果我可以让 w3schools 工具提示代码处理多列会容易得多。（使用表格或网格代替多列不适用于此项目。）

有没有其他人遇到（并希望解决）这个问题？

这是我的代码；如果你运行代码片段，你会看到上面的 div 显示了一个普通的单列 div，它可以在浏览器中正常工作；下面的 div 是生成上面屏幕截图的两列 div。

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 160%;
  left: 50%;
  margin-left: -75px;
  /* Use half of the width (150/2 = 75), to center the tooltip */
}

.tooltip .tooltiptext::after {
  /* Add an arrow */
  content: " ";
  position: absolute;
  bottom: 100%;
  /* At the top of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.contentDiv {
  margin-left: 50px;
  padding: 5px;
  width: 100px;
  border: 1px solid black;
}

.contentDiv p {
  margin: 0;
}

.contentDiv.twoColumn {
  width: 210px;
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-rule: 1px solid black;
  -moz-column-rule: 1px solid black;
  -webkit-column-rule: 1px solid black;
}

<div class="contentDiv">
  <p>
    <span class="tooltip">Hover 1
            <span class="tooltiptext">Tooltip text for Hover #1.</span>
    </span>
  </p>
  <p>
    <span class="tooltip">Hover 2
            <span class="tooltiptext">Tooltip text for Hover #2.</span>
    </span>
  </p>
</div>
<div style="clear:both;"></div>
<br>
<div class="contentDiv twoColumn">
  <p>
    <span class="tooltip">Hover 3
            <span class="tooltiptext">Tooltip text for Hover #3.</span>
    </span>
  </p>
  <p>
    <span class="tooltip">Hover 4
            <span class="tooltiptext">Tooltip text for Hover #4.</span>
    </span>
  </p>
</div>

链接到 JsFiddle

Answer 1

.tooltip .tooltiptext {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
}

这可以修复溢出部分，但我注意到该列的最后一项，工具提示仍然会向上而不是在其下方。

感觉chrome的列溢出问题还没有解决，也许可以尝试使用flex。