小编ste*_*tek的帖子

我需要在多列 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%; …