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

Open
albertkimdev opened this issue Aug 9, 2022 · 2 comments

Comments

@albertkimdev
Copy link

albertkimdev commented Aug 9, 2022

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

image

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?

@chinchang
Copy link
Owner

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:

image

@albertkimdev
Copy link
Author

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants