fix(common): variable hover tooltip was not clickable (disappeared) (#6155)

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;
+  }
+}

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 }
         },
       }

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 }
         },
       }

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", () => {

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")
+}