uiwjs / uiwjs/react-codemirror

Controlling the autocompletion tooltip position

Open
#524 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
161
PR merge metrics
No merged PRs in 30d

Description

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

image

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?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the autocomplete tooltip positioning in the react-codemirror example or integration that enables CodeMirror autocomplete, then inspect how the tooltip’s dynamic left position is determined. Done means the tooltip appears immediately to the right and below the cursor without requiring an arbitrary CSS transform.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.