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

[albertkimdev]

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?

[chinchang]

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:

[albertkimdev]

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