Hint is cut when inside an overflow hidden

Question

Hint is cut when inside an overflow hidden

ephigabay opened this issue 10 years ago · comments

Hey,
if the element I'm using hint on is inside an overflow hidden element, the tooltip is being cut.
Is there any option to fix this issue? Maybe by making a fixed position instead of absolute.

Thanks :)

Taylor Stackpole · Answer 1 · Mon May 26 2014 22:16:31 GMT+0800 (China Standard Time)

Your best bet would be to have the tool tip placed on the element using the overflow attr. Adding an extra div around the element to be tipped solved this for me in the past.

Ephi Gabay · Answer 2 · Mon May 26 2014 22:20:53 GMT+0800 (China Standard Time)

Thanks @taystack, but I have a scrollable div with several elements in it. The div itself has overflow: scroll and the items inside of it have the tooltip.
Unfortunately your solution wouldn't work in my case.

Taylor Stackpole · Answer 3 · Mon May 26 2014 22:58:10 GMT+0800 (China Standard Time)

Could you make a fiddle for us to play with? Sounds like you need overflow-y but I won't know for sure, the correct solution, without a bit of context.

Ephi Gabay · Answer 4 · Mon May 26 2014 23:59:58 GMT+0800 (China Standard Time)

http://jsfiddle.net/uWSxm/
As you can see when you hover the first two elements in the list the tooltip is hidden because it overflows the parent..

Sebastien Bartoli · Answer 5 · Thu Oct 16 2014 22:21:56 GMT+0800 (China Standard Time)

Hello ! I have the exact same issue. Has it been resolved ? Here's a screenshot. None of the containing elements have an overflow, the white card even has a overflow:visible

Anton Moilanen · Answer 6 · Fri Nov 13 2015 23:42:23 GMT+0800 (China Standard Time)

Having the same issue, setting CSS overflow property on any ancestor DOM element of the current DOM element that has the data-hint attribute will result in the hint being cut.

This seems to be the correct behavior according to the standard, reproducible in all browsers (IE, Firefox, Chrome).

The limitation of the current implementation is that hints are "local" and not "global" in the document flow, then setting the overflow property just makes it visible by cutting the hint.

Most likely this and similar issues cannot be fixed with this pure CSS approach. If you are having this issue at the moment you may want to use some alternative hint library that uses some JavaScript and positions the hint in the document flow globally.

Kushagra Gour · Answer 7 · Sun Jan 31 2016 15:51:56 GMT+0800 (China Standard Time)

Like @antivanov explained, this happens due to the defined behavior of the overflow property and Hint tooltips being local to the targeted elements.

As of now, there is no solution to this problem except avoiding the overflow property on the parent or moving the tooltip to some parent element above the overflow element in html.