Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can you make the tool tip always on top of every element and not clip? #209

albertkimdev opened this issue Aug 9, 2022 · 2 comments


Copy link

albertkimdev commented Aug 9, 2022

Right now I'm having some issues with the tooltips being placed behind other elements like


On the left side it's hidden underneath the wrapping component and not everything is being displayed.

Another issue I had was that it was stretching the component because of the width.

Is there a simple fix for this issue?

Copy link

chinchang commented Aug 9, 2022

Well...that's one of the downsides of a CSS-only tooltip library. Hint.css (or any CSS library) creates tooltips with :before & :after pseudo elements, "inside" the target element. So if any parent above it has overflow hidden, tooltips can get clipped off. Only solution here is to position (top-left, top-right....etc etc) the tooltip in a way where it can't get clipped, if at all there is such a position for your case.

Another thing you could do, make your tooltip smaller with the size modifiers (hint--small etc). In your specific case, I would suggest make it hint--medium and position it with hint--bottom-right, like so:


Copy link

albertkimdev commented Aug 9, 2022

Alright thanks, I updated the class names and it worked for my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

2 participants