diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
index b9371126d08..1002420997a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js
@@ -183,6 +183,24 @@ export class LinkPopoverWidget {
         if (document !== this.wysiwyg.odooEditor.document) {
             $(this.wysiwyg.odooEditor.document).on('mouseup.link_popover', onClickDocument);
         }
+
+        // Update popover's content and position upon changes
+        // on the link's label or href.
+        this._observer = new MutationObserver(records => {
+            if (!popoverShown) {
+                return;
+            }
+            if (records.some(record => record.type === 'attributes')) {
+                this._loadAsyncLinkPreview();
+            }
+            this.$target.popover('update');
+        });
+        this._observer.observe(this.target, {
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['href'],
+        });
     }
     /**
      *
@@ -196,6 +214,7 @@ export class LinkPopoverWidget {
         $(document).off('.link_popover');
         $(this.wysiwyg.odooEditor.document).off('.link_popover');
         this.$target.popover('dispose');
+        this._observer.disconnect();
     }
 
     /**
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index 9e4a427f130..0b1d5ae0263 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -5,6 +5,8 @@ import { ColorPalette } from '@web_editor/js/wysiwyg/widgets/color_palette';
 import weUtils from "@web_editor/js/common/utils";
 import {
     onWillUpdateProps,
+    onMounted,
+    onWillUnmount,
     useState,
 } from "@odoo/owl";
 import { normalizeCSSColor } from '@web/core/utils/colors';
@@ -54,16 +56,32 @@ export class LinkTools extends Link {
             this._setSelectOptionFromLink();
             this._updateOptionsUI();
         });
+        onMounted(() => {
+            this._observer = new MutationObserver(records => {
+                if (records.some(record => record.type === 'attributes')) {
+                    this.state.url = this.props.link.getAttribute('href') || '';
+                    this._setUrl();
+                }
+                this._updateLabelInput();
+            });
+            this._observerOptions = {
+                subtree: true,
+                childList: true,
+                characterData: true,
+                attributes: true,
+                attributeFilter: ['href'],
+            };
+            this._observer.observe(this.props.link, this._observerOptions);
+        });
+        onWillUnmount(() => {
+            this._observer.disconnect();
+        });
     }
     /**
      * @override
      */
     async _updateState() {
         await super._updateState(...arguments);
-        this._observer = new MutationObserver(async () => {
-            this._updateLabelInput();
-        });
-        this._observer.observe(this.props.link, {subtree: true, childList: true, characterData: true});
         // Keep track of each selected custom color and colorpicker.
         this.customColors = {};
         this.PREFIXES = {
@@ -102,7 +120,6 @@ export class LinkTools extends Link {
         if (shouldUnlink(this.$link[0], this.colorCombinationClass)) {
             $contents.unwrap();
         }
-        this._observer.disconnect();
         super.destroy(...arguments);
         this.props.onDestroy();
     }
@@ -112,7 +129,7 @@ export class LinkTools extends Link {
         super.applyLinkToDom(...arguments);
         this.props.wysiwyg.odooEditor.historyStep();
         this.props.onPostApplyLink();
-        this._observer.observe(this.props.link, {subtree: true, childList: true, characterData: true});
+        this._observer.observe(this.props.link, this._observerOptions);
     }
 
     //--------------------------------------------------------------------------
@@ -489,7 +506,7 @@ export class LinkTools extends Link {
         // Force update of link's content with new data using 'force: true'.
         // Without this, no update if input is same as original text.
         this._updateLinkContent(this.$link, data, {force: true});
-        this._observer.observe(this.props.link, {subtree: true, childList: true, characterData: true});
+        this._observer.observe(this.props.link, this._observerOptions);
     }
     /* If content is equal to previous URL, update it to match current URL.
      *