diff --git a/javascript/base.css b/javascript/base.css
index 6f1c1b91b..de79f8cf8 100644
--- a/javascript/base.css
+++ b/javascript/base.css
@@ -15,6 +15,7 @@
 .tooltip { display: block; position: fixed; top: 1em; right: 1em; padding: 0.5em; background: var(--input-background-fill); color: var(--body-text-color); border: 1pt solid var(--button-primary-border-color);
   width: 22em; min-height: 1.3em; font-size: 0.8em; transition: opacity 0.2s ease-in; pointer-events: none; opacity: 0; z-index: 999; }
 .tooltip-show { opacity: 0.9; }
+.tooltip-left { right: unset; left: 1em; }
 .toolbutton-selected { background: var(--background-fill-primary) !important; }
 
 /* live preview */
diff --git a/javascript/setHints.js b/javascript/setHints.js
index 66720056b..cbf7fa8c8 100644
--- a/javascript/setHints.js
+++ b/javascript/setHints.js
@@ -21,6 +21,11 @@ async function tooltipShow(e) {
   if (e.target.dataset.hint) {
     localeData.el.classList.add('tooltip-show');
     localeData.el.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
+    if (e.clientX > window.innerWidth / 2) {
+      localeData.el.classList.add('tooltip-left');
+    } else {
+      localeData.el.classList.remove('tooltip-left');
+    }
   }
 }