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

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

火狐：

铬：

狩猎：

我认为Safari可能将溢出当作设置为隐藏，但如果是这样，我找不到任何方法来改变它的行为。我找不到任何现有的问题来解决多列布局中的工具提示格式问题

现在我担心我可能不得不咬紧牙关，编写自定义javascript来检测悬停，抓取工具提示的文本，将文本填充到浮动在页面内容上方的div中，显示与链接相关的正确位置的div，并在鼠标离开链接时再次隐藏它。显然，如果我能让工具提示代码与多个列一起工作，那就容易多了。（使用表格或网格代替多列不适用于此项目。）

还有其他人遇到过（并有望解决）这个问题吗

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

/*工具提示容器*/
.工具提示{
位置：相对位置；
显示：内联块；
}
/*工具提示文本*/
.tooltip.tooltiptext{
可见性：隐藏；
宽度：150px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
填充物：5px；
边界半径：6px；
/*定位工具提示文本*/
位置：绝对位置；
z指数：1；
最高：160%；
左：50%；
左边距：-75px；
/*使用一半宽度（150/2=75）将工具提示居中*/
}
.tooltip.tooltiptext:：之后{
/*添加箭头*/
内容：“；
位置：绝对位置；
底部：100%；
/*在工具提示的顶部*/
左：50%；
左边距：-10px；
边框宽度：10px；
边框样式：实心；
边框颜色：透明黑色透明；
}
/*将鼠标悬停在工具提示容器上时显示工具提示文本*/
.tooltip:悬停.tooltiptext{
能见度：可见；
}
.contentDiv{
左边距：50像素；
填充物：5px；
宽度：100px；
边框：1px纯黑；
}
.contentDiv p{
保证金：0；
}
.contentDiv.two列{
宽度：210px；
列数：2；
-moz列数：2；
-webkit列数：2；
列规则：1px纯黑；
-moz列规则：1px纯黑色；
-webkit列规则：1px纯黑色；
}

悬停1
悬停#1的工具提示文本。


悬停2
悬停#2的工具提示文本。




悬停3
悬停#3的工具提示文本。


悬停4
悬停#4的工具提示文本。

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

---

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

浏览器之间的不兼容性挫败了我寻找css专用解决方案的努力，所以我咬了一口，添加了一点javascript，并在下面提供了一个适合我的解决方案。此解决方案支持文本工具提示（可以包括html标记）和图片工具提示

$（函数（）{
var$tip；
函数makeTip（）{
$（document.body）。追加（“”）；
$tip=$（“#工具提示”）；
}
$（“.tipLink”）.hover（函数（）{
var st=$（this）.data（“tip”），
rect=this.getBoundingClientRect（），
hasImage=st.match(/^

项目1：悬停1


项目2：悬停2




项目3：悬停3


项目4：悬停4

谢谢；这对Chrome很有帮助，但似乎对Safari没有任何影响。虽然我在最初的帖子中没有提到这一点，但我仍然对Chrome和Safari在多列布局中的两个元素下添加了如此多的额外空间感到不安。Firefox是三个将这两个元素放在两列中的元素中唯一一个，而ich显然是正确的做法。我也很好奇为什么背面可见性与此相关。文档建议此设置仅与3D转换相关。这可能不是chrome上的错误，但至少他们应该提供溢出控制，以便开发人员可以轻松控制他们想要的。

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