[tooltip] must not be cropped by owning overflow viewport

[mvorisek]

Bug Report

Repro

https://jsfiddle.net/bjptg85n/

I belive no FUI component must use position: relative as it does not play well with overflow and it seems there is no way to recover from the cropped viewport then.

Screenshot

1. cropped by owning overflow viewport

2. badly positioned

Version

2.9.3/latest

[lubber-de]

Tooltip is a css only solution which needs position relative to make sure the tooltip appears next to the related element.

[mvorisek]

Yes, but consider any viewport with scroll, like a table. Such viewport needs overflow.

And as the viewport is needed, position: relative cannot be used.

I belive this must be fixed as the usecase of viewport with scroll and tooltip inside is legit.

[lubber-de]

I think, this isn't fixable via CSS only, as we cannot detect (yet) via CSS if an element is actually overflown or wrapped
If one needs this inside an overflowing container, the regular JS "popup" needs to be used instead.

[lubber-de]

After a quick investigation, the only fix i can offer is an additional variation class like "absolute" as always using "absolute" will break lots of cases.
For example doing this for https://fomantic-ui.com/modules/popup.html#tooltip-position it will result in

I also cannot tell if it would be ok for each inline element like the icon you used in the jsfiddle

As i cannot determine a general approach, i can only think of some custom support like

    [data-tooltip][data-variation~="absolute"] {
        position: absolute;
    }

would support your use case. (i am not yet sure if "absolute" would be a good enough term though

<span class="ui icon link " data-tooltip="foo" data-variation="absolute"><i class="ui icon info circle blue"></i></span>

See https://jsfiddle.net/lubber/ghuxpe80/

[lubber-de]

The "absolute" setting has one drawback: it wont be part of the scrolling container anymore. If you scroll down, the icon gets misplaced (however the tooltip is still working fine :D)

Try to scroll down inside the containers
https://jsfiddle.net/lubber/ghuxpe80/2/

[mvorisek]

https://jsfiddle.net/x4fkmc7L/ is the best I managed to fix it but it is not a solution, as it requires different HTML structure and known size of the internal content.

I am closing this issue as we should use Fomantic-UI Popup - I agree with #2972 (comment) - which solves this issue by placing the tooltip div outside the wrapping div (the one with overflow set).