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

Describe the bug

  • Cropped tooltip: image

_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”,

    About this issue

    • Original URL
    • State: closed
    • Created 2 years ago
    • Comments: 17 (15 by maintainers)

    Most upvoted comments

    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!

    +2
    thibault-mahe on Oct 7, 2022

    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

    +1
    astahmer on Jun 29, 2022

    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

    +1
    astahmer on Mar 2, 2022

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

    +1
    lauthieb on Feb 23, 2022
    Read more comments on GitHub
    ← gatsby-starter-decap-cms: gatsby develop- does not work on unaltered clone
    ion: Wallet file verification failure on npm run bitcoin →