diff --git a/lute/static/js/lute.js b/lute/static/js/lute.js
index 7eb1da60..e78a37b5 100644
--- a/lute/static/js/lute.js
+++ b/lute/static/js/lute.js
@@ -47,11 +47,8 @@ function start_hover_mode(should_clear_frames = true) {
 
 /** 
  * Prepare the interaction events with the text.
- *
- * pos = position hash, e.g.
- * {my: 'center bottom', at: 'center top-10', collision: 'flipfit flip'}
  */
-function prepareTextInteractions(pos) {
+function prepareTextInteractions() {
   const t = $('#thetext');
   // Using "t.on" here because .word elements
   // are added and removed dynamically, and "t.on"
@@ -75,7 +72,7 @@ function prepareTextInteractions(pos) {
   $(document).on('keydown', handle_keydown);
 
   $('#thetext').tooltip({
-    position: pos,
+    position: _get_tooltip_pos(),
     items: '.word.showtooltip',
     show: { easing: 'easeOutCirc' },
     content: function (setContent) { tooltip_textitem_hover_content($(this), setContent); }
@@ -83,6 +80,17 @@ function prepareTextInteractions(pos) {
 }
 
 
+/* ========================================= */
+/** Tooltip (term detail hover). */
+
+let _get_tooltip_pos = function() {
+  let ret = {my: 'left top+10', at: 'left bottom', collision: 'flipfit flip'};
+  if (window.matchMedia("(max-width: 980px)").matches) {
+    ret = {my: 'center bottom', at: 'center top-10', collision: 'flipfit flip'};
+  }
+  return ret;
+}
+
 /**
  * Build the html content for jquery-ui tooltip.
  */
@@ -98,6 +106,9 @@ let tooltip_textitem_hover_content = function (el, setContent) {
 }
 
 
+/* ========================================= */
+/** Showing the edit form. */
+
 function _show_wordframe_url(url) {
   top.frames.wordframe.location.href = url;
   applyInitialPaneSizes();  // in resize.js
diff --git a/lute/templates/read/index.html b/lute/templates/read/index.html
index b52035b5..7ae02fca 100644
--- a/lute/templates/read/index.html
+++ b/lute/templates/read/index.html
@@ -188,7 +188,6 @@ <h2>&#127881;</h2>
   let mouseY;
   let scrollY;
   let scrollYBeforeReload;
-  let tooltipPos = {my: 'left top+10', at: 'left bottom', collision: 'flipfit flip'};
   const mediaTablet = window.matchMedia("(max-width: 980px)");
   const readPaneRight = document.getElementById("read_pane_right");
   const btmMarginCont = document.querySelector(".btm-margin-container");
@@ -230,9 +229,6 @@ <h2>&#127881;</h2>
     
     theTextReloadObs.observe(theText, {childList: true, subtree: true});
 
-    if (mediaTablet.matches) {
-      tooltipPos = {my: 'center bottom', at: 'center top-10', collision: 'flipfit flip'};
-    }
     // do not load focus state if in tablet mode
     if (!mediaTablet.matches) {
       const book_id = $('#book_id').val();
@@ -476,7 +472,7 @@ <h2>&#127881;</h2>
         $("html, body").animate({ scrollTop: 0 });
 
         if (initial_page_load) {
-          prepareTextInteractions(tooltipPos);
+          prepareTextInteractions();
         }
 
         // Magic hack for player source to load consistently