fix: make tooltips work when Graphiql is not full page and window has…

… scrolled (#3203)
graphql · Jun 1, 2023 · 6198646 · 6198646
1 parent cf590e3
commit 6198646
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/sour-monkeys-film.md b/.changeset/sour-monkeys-film.md
@@ -0,0 +1,5 @@
+---
+'codemirror-graphql': patch
+---
+
+fix info tooltips to work when Graphiql is not used as full page
diff --git a/packages/codemirror-graphql/src/utils/info-addon.ts b/packages/codemirror-graphql/src/utils/info-addon.ts
@@ -90,10 +90,13 @@ function onMouseOver(cm: CodeMirror.Editor, e: MouseEvent) {
 }
 
 function onMouseHover(cm: CodeMirror.Editor, box: DOMRect) {
-  const pos = cm.coordsChar({
-    left: (box.left + box.right) / 2,
-    top: (box.top + box.bottom) / 2,
-  });
+  const pos = cm.coordsChar(
+    {
+      left: (box.left + box.right) / 2,
+      top: (box.top + box.bottom) / 2,
+    },
+    'window',
+  ); // 'window' allows to work when editor is not full page and window has scrolled
 
   const state = cm.state.info;
   const { options } = state;