From 7be31a298601c24053033dc64928aae659a4921f Mon Sep 17 00:00:00 2001
From: Aaron Fort Garcia <aaronfortg@gmail.com>
Date: Tue, 21 Apr 2026 15:45:18 +0200
Subject: [PATCH] fix(common): variable hover tooltip was not clickable
 (disappeared) (#6155)

---
 .../hoppscotch-common/assets/scss/styles.scss | 16 ++++++++++++++++
 .../editor/extensions/HoppEnvironment.ts      |  4 ++++
 .../extensions/HoppPredefinedVariables.ts     |  4 ++++
 .../helpers/utils/__tests__/tooltip.spec.ts   | 19 +++++++++++++++++++
 .../src/helpers/utils/tooltip.ts              | 11 +++++++++++
 5 files changed, 54 insertions(+)

diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss
index 37594450..5c0541a1 100644
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -561,3 +561,19 @@ details[open] summary .indicator {
 .gql-operation-highlight {
   @apply opacity-100;
 }
+
+/*
+ * Standardizes interactive tooltip behavior by extending the hover area.
+ * This prevents tooltips from hiding when the cursor moves across small
+ * gaps between the trigger text and the tooltip box.
+ */
+.hopp-tooltip-interactive-wrapper {
+  @apply relative;
+
+  &::before {
+    content: "";
+    @apply absolute;
+    @apply -inset-2;
+    @apply pointer-events-auto;
+  }
+}
diff --git a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
index 4b3e1df2..23564fd2 100644
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -42,6 +42,7 @@ import {
   HOPP_ENVIRONMENT_REGEX,
 } from "~/helpers/environment-regex"
 import {
+  stabilizeTooltipHover,
   constrainTooltipToViewport,
   createTooltipValueRow,
 } from "~/helpers/utils/tooltip"
@@ -313,6 +314,9 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
           // Apply viewport-aware overflow constraints to the tooltip
           constrainTooltipToViewport(dom, tooltipContainer)
 
+          // Apply an interactive bridge to stabilize hover transitions
+          stabilizeTooltipHover(dom)
+
           return { dom }
         },
       }
diff --git a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts
index dc3c0048..4a20280a 100644
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts
@@ -10,6 +10,7 @@ import { HOPP_SUPPORTED_PREDEFINED_VARIABLES } from "@hoppscotch/data"
 import IconSquareAsterisk from "~icons/lucide/square-asterisk?raw"
 import { isComment } from "./helpers"
 import {
+  stabilizeTooltipHover,
   constrainTooltipToViewport,
   truncateText,
 } from "~/helpers/utils/tooltip"
@@ -146,6 +147,9 @@ const cursorTooltipField = () =>
           // Apply viewport-aware overflow constraints
           constrainTooltipToViewport(dom, tooltipContainer)
 
+          // Apply an interactive bridge to stabilize hover transitions
+          stabilizeTooltipHover(dom)
+
           return { dom }
         },
       }
diff --git a/packages/hoppscotch-common/src/helpers/utils/__tests__/tooltip.spec.ts b/packages/hoppscotch-common/src/helpers/utils/__tests__/tooltip.spec.ts
index 6e3b0179..596459a5 100644
--- a/packages/hoppscotch-common/src/helpers/utils/__tests__/tooltip.spec.ts
+++ b/packages/hoppscotch-common/src/helpers/utils/__tests__/tooltip.spec.ts
@@ -6,6 +6,7 @@ import {
   applyTooltipOverflowStyles,
   createTooltipValueRow,
   constrainTooltipToViewport,
+  stabilizeTooltipHover,
   TOOLTIP_MAX_VALUE_LENGTH,
   TOOLTIP_MAX_HEIGHT_PX,
   TOOLTIP_MAX_WIDTH_PX,
@@ -374,6 +375,24 @@ describe("constrainTooltipToViewport", () => {
   })
 })
 
+// ─── stabilizeTooltipHover ───────────────────────────────────────
+
+describe("stabilizeTooltipHover", () => {
+  test("adds 'hopp-tooltip-interactive-wrapper' class to element", () => {
+    const el = document.createElement("div")
+    stabilizeTooltipHover(el)
+    expect(el.classList.contains("hopp-tooltip-interactive-wrapper")).toBe(true)
+  })
+
+  test("does not remove existing classes", () => {
+    const el = document.createElement("div")
+    el.className = "existing-class"
+    stabilizeTooltipHover(el)
+    expect(el.className).toContain("existing-class")
+    expect(el.className).toContain("hopp-tooltip-interactive-wrapper")
+  })
+})
+
 // ─── Constants ───────────────────────────────────────────────────
 
 describe("Tooltip Constants", () => {
diff --git a/packages/hoppscotch-common/src/helpers/utils/tooltip.ts b/packages/hoppscotch-common/src/helpers/utils/tooltip.ts
index 97698d88..9c760582 100644
--- a/packages/hoppscotch-common/src/helpers/utils/tooltip.ts
+++ b/packages/hoppscotch-common/src/helpers/utils/tooltip.ts
@@ -195,3 +195,14 @@ export function constrainTooltipToViewport(
   tooltipContent.style.overflow = "hidden"
   tooltipContent.style.boxSizing = "border-box"
 }
+
+/**
+ * Standardized helper to stabilize interactive tooltips in CodeMirror.
+ * Adds a CSS-based bridge to extend the hover area, allowing the user
+ * to move the cursor into the tooltip without it closing.
+ *
+ * @param dom - The outer tooltip container element (.tippy-box)
+ */
+export function stabilizeTooltipHover(dom: HTMLElement): void {
+  dom.classList.add("hopp-tooltip-interactive-wrapper")
+}