Controlling the autocompletion tooltip position

[mgoldenbe]

The tooltip appears very far to the right from the current position of the cursor:

The surrounding element does not have any transformations. I would like to have the tooltip appear immediately to the right and below the cursor. Since it looks like the left attribute is computed dynamically, here is what I am trying to affect it:

.cm-tooltip-autocomplete.cm-tooltip.cm-tooltip-below {
    transform: translateX(-12em);
}

I tried using px and rem, but cannot figure out the right formula.

So, how can I achieve that the autocompletion tooltip should appear immediately to the right and below the cursor?

[jaywcjlove]

@mgoldenbe I did not reproduce your error.

[jaywcjlove]

https://codemirror.net/examples/tooltip/

You can customize your own Tooltips.

[mgoldenbe]

I had this in my SCSS:

.learning-content {
    container: learning-content / inline-size;
    position: relative;
    display: inline-block;
    width: 100%;
    height: inherit;
}

This class was used by a non-immediate parent of the editor. There was no @container query that used it, but somehow the container property resulted in bad tooltip position...

[jaywcjlove]

@mgoldenbe Please provide a reproducible example, thanks.

[mgoldenbe]

@jaywcjlove https://codesandbox.io/s/icy-lake-dhv6nf

[jaywcjlove]

@mgoldenbe You are using position: absolute; which confuses me. resulting in incorrectly calculated positions.

[mgoldenbe]

@jaywcjlove What's confusing you about it? Are you saying this is normal behavior to be expected? Also, without the container property it works just fine even with the absolute positioning...

[jaywcjlove]

The way you use position confuses me.

@mgoldenbe In short your styles affect the codemirror editor, so you need to make changes.

[mgoldenbe]

What's wrong about the right property you deleted? If you make assumptions about CSS, you should state them explicitly in the documentation. Otherwise, your library must work correctly with any valid CSS.

[ryandvmartin]

Facing the same issue with autocomplete when component is nested inside something with @container... Just wanted to share a workaround that worked in my case: disable autocomplete from the basicSetup options, and enable using the codemirror extension

import { autocompletion } from "@codemirror/autocomplete";

<ReactCodeMirror 
  ...
  basicSetup={{
    ...
    autocomplete: false
  }}
  extensions={[..., autocompletion()]}
/> 

EDIT: this ends up not working... so nevermind!