fix: tooltip positioning near edge [FC-0062] (#35848)

Fixes the tooltip positioning rule to avoid rendering it outside the window/iframe.
openedx · Nov 15, 2024 · 842aec4 · 842aec4
1 parent cb1e6ee
commit 842aec4
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/common/static/js/src/tooltip_manager.js b/common/static/js/src/tooltip_manager.js
@@ -32,9 +32,20 @@
         },
 
         getCoords: function(pageX, pageY) {
+            let left = pageX - 0.5 * this.tooltip.outerWidth();
+            const top = pageY - (this.tooltip.outerHeight() + 15);
+            // Check if the tooltip is going off the right edge of the screen
+            if (left + this.tooltip.outerWidth() > window.innerWidth) {
+                left = window.innerWidth - this.tooltip.outerWidth();
+            }
+            // Check if the tooltip is going off the left edge of the screen
+            if (left < 0) {
+                left = 0;
+            }
+
             return {
-                left: pageX - 0.5 * this.tooltip.outerWidth(),
-                top: pageY - (this.tooltip.outerHeight() + 15)
+                left,
+                top,
             };
         },