我想创建基于css的工具提示，但我挣扎与正确的位置。我的想法是设置工具提示文本作为一个数据工具提示属性，并显示他们的悬停。
现在的问题是，在某些情况下，位置不起作用。例如，如果工具提示被一个相对定位的元素覆盖，溢出被隐藏。
看这个演示小提琴：https://jsfiddle.net/45Lbhusk/
第一个
我尝试将工具提示定位为“固定”和“绝对”，但两者都有问题：
- 修复了不滚动，如果页面滚动，工具提示会显示在错误的位置
- 绝对工具提示可能会被父对象剪切。
我读了许多其他的问题，以相同的主题，但他们需要js的工作或有其他的要求。我真的想有一个css唯一的解决方案。
编辑1：页面上的其他元素可能是从其他脚本生成的，比如jquery数据表插件。所以我不能注意其他元素是否适合工具提示。工具提示应该与所有其他元素一起工作。所以请不要更改div样式，因为我不能确保它适合工具提示。
1条答案
按热度按时间ippsafx71#
此解决方案旨在解决
absolute版本的工具提示被带有overflow: hidden的容器剪切的问题。它使用这个answer的方法，在设定为
overflow: hidden的容器内显示absolute定位的工具提示。此外，这也增加了对
pointer-events的控制，因此在项目列表中，工具提示不太可能阻止其他相邻元素上的悬停事件。然而，缺点是该方法需要额外的样式来扩展容器的可见范围，这很可能与最初将其设置为
overflow: hidden的原因相矛盾。示例：
第一个