bug(@vtmn/react): `VtmnTooltip` is cropped

[astahmer]

Describe the bug

• Cropped tooltip:

Originally posted by @Charles-Babin in https://github.com/dktunited/mybusiness/issues/2328#issuecomment-1030169452

Steps to reproduce

• have a container div wrapping a element, set a max-height + overflow: auto so the table can be scrolled inside the container
  have a tooltip anywhere inside that table near the container div's borders
  hover the tooltip and see that it's cropped

  Expected behavior

  not being cropped this might not be feasible using just css, usually solved using Portal

  Browsers affected

  - Chrome
  

  Version affected

  "@vtmn/css-tooltip": "^0.6.4",

[lauthieb]

thanks @astahmer for reporting this. @GaspardMathon is it possible for you to check this asap? Thanks a lot.

[GaspardMathon]

Thanks @astahmer for your issue. I checked on my side and the overflow container is blocking the display of the tooltip, but thats seems normal to me as the role of the overflow is to hide everything out of the container.

I have two solutions :

• I can make the tooltip as wide as the element it wraps, and make the text wrap too so the the tooltip will stay consistent within its element.
• I can't make the tooltip only overflow of the parent container with overflow: hidden, for me it's you you have to choose the right position variant of the tooltip according the context. So that means applying a position bottom when the text is at the top of the page/container and a position right when your element is near the left of your page/container.

I need to ask my designer team about the change for the first point.

[GaspardMathon]

From a design POV, the tooltip must remain on one line only and be as wide as it contains text (but we suggest to write short text only in tooltip). However, if you need to have a bigger kind of tooltip, you can use a popover component instead of the tooltip.

[astahmer]

made a basic reproduction repo + solution using portal as mentionned in the original post https://github.com/astahmer/vtmn-tooltip-portal

https://codesandbox.io/s/github/astahmer/vtmn-tooltip-portal it seems vitamin is hiding tooltips with breakpoints so you need to open the preview in a new window to see the cropped case

[lauthieb]

Hi @astahmer, do you think that we need CSS modifications from our side?

[astahmer]

im not aware of a way to bypass an overflow:hidden parent in pure css so, like I said in my original post, this should probably be solved using portal as demonstrated in the repo linked just above

[lauthieb]

Okay thanks a lot @astahmer

[astahmer]

weird closing this issue, that means you won't address it ? i did file this as a bug to vtmn/react, and not vtmn/css ?

[lauthieb]

OH okay, I reopen if React contributor can help us.

[astahmer]

I did just that in the repo I linked above..

https://github.com/astahmer/vtmn-tooltip-portal/blob/main/src/components/VtmnTooltipWithRender.tsx https://github.com/astahmer/vtmn-tooltip-portal/blob/main/src/components/VtmnTooltipWithPortal.tsx

[lauthieb]

Thanks @astahmer. I hope someone will make a PR, sorry React is a community lib so we don't have any time / skills to make this inside @vtmn/react. I add the label "help wanted"

[lauthieb]

Hi @astahmer, I hope you're well.

I began to create a PR in order to resolve the issue you mentioned here => https://github.com/Decathlon/vitamin-web/pull/1200

But I still have this error in storybook (yarn start:react):

Can you please help me?

Thanks a lot.

[astahmer]

hey @lauthieb , kinda hard to reproduce without a codesandbox/stackblitz or at least the story commited

a quick google search leads to:

To solve the "createRoot(...): Target container is not a DOM element" error, make sure that the ID you are using to select the element is the same ID that you have specified in your index.html file and place the react script below the code that declares the div element.

looking at the current state of the PR this looks like this won't work as expected as btw, you still need a positioning library in your implementation like here or here

[lauthieb]

Hi @astahmer, thanks for your explanations. I keep this in mind for v1.

[NourcheneBenali]

Hello, are there any news about this bug ? I have the same issue

[thibault-mahe]

Hi @NourcheneBenali, unfortunately not yet. As it is discussed here:

• it seems that there is no need to make modification from our side on the @vtmn/css package since it is not a css issue ;
• the tooltip component need to be rewritten with a positioning library. Currently the most common one seems to be @floating-ui/dom (Vanilla) or @floating-ui/react-dom (React specific) as @astahmer suggested ;
• this React package is a community lib we can't actively maintain for now so we hope someone could make a PR to help you on this issue.

We are currently working on new ways to help Vitamin users contribute and consume our components though, including a rework of some of this components. But for now we can only leave this issue open and remain available if anyone wishes to propose a solution.

Sorry about that!

[stale[bot]]

This has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Feel free to reopen whenever you want. Thank you for your contributions.