Tooltips get cutoff when used in horizontal table

Question

Tooltips get cutoff when used in horizontal table

ErikSchierboom opened this issue 5 years ago · 5 comments

Framework Version: 3.0.1
Flavor used: default
Operating System/Browser: Chrome/Mac OS
Code to reproduce: https://codepen.io/erikschierboom/pen/ZEEPWdw

Reproduce by hovering over the "Text #1.1", "Text #1.2", or "Text #2.1" texts inside the table.

Screenshots:

Bug description:

When using tooltips in a horizontal table, the tooltips are cutoff on the border of the table. I'd like for the tooltips to be displayed in their entirety.

Answer 1 · 2020-01-09T11:16:08.000Z

Same issue here. I also tried to experiment with different z-index but hat no success.
Any update on this issue?

Answer 2 · 2020-01-22T07:43:05.000Z

I checked out Firefox/Windows 10 and does not happen, maybe it's a Chrome quirk?

Answer 3 · 2020-01-22T08:26:27.000Z

I am facing the issues on Windwos10 with Firefox.

Answer 4 · 2020-01-25T15:33:43.000Z

True, I am able to reproduce it also maybe I did something wrong the last day :/

Answer 5 · 2020-01-26T09:37:20.000Z

After some testing, I've found out that the problem has to do with relative-absolute positioning that is being used with tooltip, as this stack overflow answer points out: https://stackoverflow.com/a/611098/1842548

The problem is that changing this would introduce breaking changes, as a new element must be introduced, sadly.

If we were talking inside a framework context such as React, the library consumers would not notice it, but as is a css pure framework, the implications are... well rather complicated.

We should look for solving this anyway.