Copy tooltip shows up behind navigation bar - Githubissues

mintlify / components

UI components for documentation made with React and TailwindCSS.

MIT License

79 stars 12 forks source link

Copy tooltip shows up behind navigation bar #42

Closed ghost closed 1 year ago

ghost commented 1 year ago

Likely need to increase the z-index to make it show up over the navigation bar in mint

tooltip

NicoZweifel commented 1 year ago

Another one of those, nice catch :P

NicoZweifel commented 1 year ago

I had the same issue on the right side in this PR, but decided to use shorter text here. If you prefer click to copy I could revert to that when changing z-index works, but I feel like it is a bit odd to have the longer version instead of just copy.

NicoZweifel commented 1 year ago

It seems that this happens only for Grouped Code Blocks because the normal Code Blocks have a top margin. I am ivestigating this issue here:https://github.com/mintlify/components/pull/44

ghost commented 1 year ago

@NicoZweifel I tested mint with the new z-index but the backdrop-blur class on the navigation bar is still blurring the component despite the z-index being higher. Seems like the backdrop-blur affects components regardless of z-index. There are other steps required to avoid blurring the tooltip when I searched StackOverflow for this problem.

Can you look into how to get the backdrop-blur not to affect the tooltip?

NicoZweifel commented 1 year ago

Yeah I can take a look tomorrow 👍

NicoZweifel commented 1 year ago

When the new components version is published, I can continue and merge this: https://github.com/mintlify/mint/pull/299

ghost commented 1 year ago

Issue is fixed for most code blocks except for the right-side bar ones that have sticky set.

NicoZweifel commented 1 year ago

@tobias-mintlify It is because of a new StackingContext. you can read about it here.

"A stacking context is formed, anywhere in the document, by any element in the following scenarios:

Root element of the document ().
Element with a position value absolute or relative and z-index value other than auto.
Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop browsers)."

ghost commented 1 year ago

Let's get rid of sticky on the navbar then. I was messing around with it and we could use fixed instead of sticky then we just need margin/padding/a spacer div so the content doesn't show up under the nav bar until the page loads.

NicoZweifel commented 1 year ago

Sounds good, I could take a look today/tomorrow.

ghost commented 1 year ago

All the edge cases are fixed! Thank you for all the help @NicoZweifel 🥳