diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index 1165d1e39..6a2b35147 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -577,12 +577,14 @@ class AnnotationElement {
     if (this.container) {
       this.container.hidden = false;
     }
+    this.popup?.maybeShow();
   }
 
   hide() {
     if (this.container) {
       this.container.hidden = true;
     }
+    this.popup?.forceHide();
   }
 
   getElementsToTriggerPopup() {
@@ -1861,8 +1863,7 @@ class PopupAnnotationElement extends AnnotationElement {
   render() {
     this.container.classList.add("popupAnnotation");
 
-    // eslint-disable-next-line no-new
-    new PopupElement({
+    const popup = new PopupElement({
       container: this.container,
       color: this.data.color,
       titleObj: this.data.titleObj,
@@ -1875,10 +1876,14 @@ class PopupAnnotationElement extends AnnotationElement {
       elements: this.elements,
       open: this.data.open,
     });
-    this.container.setAttribute(
-      "aria-controls",
-      this.elements.map(e => e.data.id).join(",")
-    );
+
+    const elementIds = [];
+    for (const element of this.elements) {
+      element.popup = popup;
+      elementIds.push(element.data.id);
+    }
+
+    this.container.setAttribute("aria-controls", elementIds.join(","));
 
     return this.container;
   }
@@ -1915,6 +1920,8 @@ class PopupElement {
 
   #titleObj = null;
 
+  #wasVisible = false;
+
   constructor({
     container,
     color,
@@ -2124,7 +2131,7 @@ class PopupElement {
     if (!this.#popup) {
       this.render();
     }
-    if (this.#container.hidden) {
+    if (!this.isVisible) {
       this.#container.hidden = false;
       this.#container.style.zIndex =
         parseInt(this.#container.style.zIndex) + 1000;
@@ -2145,6 +2152,26 @@ class PopupElement {
     this.#container.style.zIndex =
       parseInt(this.#container.style.zIndex) - 1000;
   }
+
+  forceHide() {
+    this.#wasVisible = this.isVisible;
+    if (!this.#wasVisible) {
+      return;
+    }
+    this.#container.hidden = true;
+  }
+
+  maybeShow() {
+    if (!this.#wasVisible) {
+      return;
+    }
+    this.#wasVisible = false;
+    this.#container.hidden = false;
+  }
+
+  get isVisible() {
+    return this.#container.hidden === false;
+  }
 }
 
 class FreeTextAnnotationElement extends AnnotationElement {
diff --git a/test/integration/freetext_editor_spec.js b/test/integration/freetext_editor_spec.js
index 6bfeb4b20..df0013268 100644
--- a/test/integration/freetext_editor_spec.js
+++ b/test/integration/freetext_editor_spec.js
@@ -1153,5 +1153,31 @@ describe("FreeText Editor", () => {
         })
       );
     });
+
+    it("must hide the popup when editing", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("[data-annotation-id='20R']");
+          // Wait for the popup to be displayed.
+          await page.waitForFunction(
+            `document.querySelector("[data-annotation-id='popup_20R']").hidden === false`
+          );
+
+          // Enter in editing mode.
+          await page.click("#editorFreeText");
+          // Wait for the popup to be hidden.
+          await page.waitForFunction(
+            `document.querySelector("[data-annotation-id='popup_20R']").hidden === true`
+          );
+
+          // Exit editing mode.
+          await page.click("#editorFreeText");
+          // Wait for the popup to be visible.
+          await page.waitForFunction(
+            `document.querySelector("[data-annotation-id='popup_20R']").hidden === false`
+          );
+        })
+      );
+    });
   });
 });