html - 在 overflow hidden 和滚动条的容器外显示内容

Question

https://jsfiddle.net/rafaelfndev/h63r4mye/

是否可以在 overflow 设置为隐藏的容器上显示 tooltip？

我知道可以使用 position: fixed(绿色容器具有属性 overflow: hidden)。

我做了 2 个例子，问题是滚动时...首先按钮与框架一起滚动，其次，工具提示与框架一起滚动。

我需要将这些框放入带有 overflow: hidden 的容器中，并在悬停时显示工具提示(但是，工具提示被容器的 overflow: hidden 隐藏了).

是否可以仅使用 CSS 来实现？

Answer 1

这样做的方法是设置它的父 position="absolute" 而不是 relative。所以 tooltip 不会相对于它的父级定位并且可以超出容器。

但对于您的情况，它会影响您的设计，因此我建议您执行以下操作之一:

轻松添加 padding-top: 40px; 到容器中，这样工具提示就可以显示在顶部。并且最好设置一个 padding-bottom: 40px; 并使其不对称。

或者不要将 tooltip 放在元素上方，将它们放在左侧的旁边，我也建议您这样做。