Autocompletion tooltip positionning issue when a parent has a transform CSS property

1

Hello,
I’m encountering a positioning issue with the tooltip created by the autocompletion extension. The reason is that the editor is placed inside an overlay that can be dragged around the page by the user. To be draggable, the overlay has a “transform” CSS property that is set to something else than ‘none’. This property prevents the ‘position: fixed’ of children elements to work as expected, so the tooltip is not positionned according to the viewport.
Is there any workaround so that the tooltip gets positionned correctly on the page?
Thanks

2

There’s other things that will break in a transformed parent. This is unfortunately simply not something we support at the moment (see #324 for further discussion).

3

Thank you for the link.

I wish there was an API to manually provide a parent element to which the tooltip will by attached to. I feel like just providing the body would fix any positionning issue.

4

I don’t think it will help, but that API exists.

1 Like
5

It looks like it’s working actually!
thanks for your help!

For anyone who gets the same issue:

EditorState.create({
    doc: initialCode,
    extensions: [
      ...
      autocompletion(),
      tooltips({
        parent: document.body,
      }),
      ...
    ],
  });