search

chinchang / hint.css

A CSS only tooltip library for your lovely websites.
https://kushagra.dev/lab/hint/
MIT License
8.42k stars 701 forks source link

Hint is cut when inside an overflow hidden #78

Closed ephigabay closed 8 years ago

ephigabay commented 10 years ago

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 :)

taystack commented 10 years ago

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.

ephigabay commented 10 years ago

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.

taystack commented 10 years ago

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.

ephigabay commented 10 years ago

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 commented 10 years ago

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

tooltip cropped

amoilanen commented 8 years ago

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.

chinchang commented 8 years ago

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.