diff --git a/lute/static/css/styles.css b/lute/static/css/styles.css
index 1228257e..51304edd 100644
--- a/lute/static/css/styles.css
+++ b/lute/static/css/styles.css
@@ -303,7 +303,7 @@ span.hamburger {
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 1001; /* higher than audio and header */
+  z-index: 1004; /* higher than audio, header and right_pane (for mobile view) */
   height: 100vh;
   border-right: 4px solid #a9cfef;
   box-shadow: 1px 0 3px 2px #9393933d;
@@ -642,7 +642,7 @@ img
 /* Widening the tooltip. */
 div.ui-tooltip {
     max-width: 400px !important;
-    z-index: 888; /*less than audio, header and side menu */
+    z-index: 1000; /*higher than audio because of words on the bottom, but lower than header and side menu */
 }
 
 .tooltip-image {
@@ -1229,10 +1229,14 @@ div.help-text {
         width: 100%;
         background: var(--background-color);
         height: 7.5rem;
-        z-index: 1000;
+        z-index: 1001;
         box-shadow: 0 0 12px 0 #dfdfdf;
     }
 
+    div.ui-tooltip {
+        z-index: 1002;
+    }
+
     #read_pane_left {
         width: unset !important;
         margin-top: 10rem;
@@ -1250,7 +1254,7 @@ div.help-text {
 
     div#read_pane_right {
         background-color: white;
-        z-index: 1002;
+        z-index: 1003;
         transform: translateY(100%);
         /* transition: all creates issues for drag resizing (laggy, slow)*/
         transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), 
diff --git a/lute/static/js/lute.js b/lute/static/js/lute.js
index 979fe2ae..eebc53e9 100644
--- a/lute/static/js/lute.js
+++ b/lute/static/js/lute.js
@@ -73,7 +73,7 @@ let clear_frames = function() {
 /** 
  * Prepare the interaction events with the text.
  */
-function prepareTextInteractions(textid) {
+function prepareTextInteractions(pos) {
   const t = $('#thetext');
   // Using "t.on" here because .word elements
   // are added and removed dynamically, and "t.on"
@@ -92,7 +92,7 @@ function prepareTextInteractions(textid) {
   $(document).on('keydown', handle_keydown);
 
   $('#thetext').tooltip({
-    position: { my: 'left top+10', at: 'left bottom', collision: 'flipfit flip' },
+    position: pos,
     items: '.word.showtooltip',
     show: { easing: 'easeOutCirc' },
     content: function (setContent) { tooltip_textitem_hover_content($(this), setContent); }
diff --git a/lute/templates/read/index.html b/lute/templates/read/index.html
index 3c5fd33d..3787799b 100644
--- a/lute/templates/read/index.html
+++ b/lute/templates/read/index.html
@@ -180,6 +180,8 @@ <h2>&#127881;</h2>
 <script>
   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");
@@ -200,6 +202,16 @@ <h2>&#127881;</h2>
   })
 
   $(document).ready(function () {
+    const theTextReloadObs = new MutationObserver((mutationList, observer) => {
+      if (scrollYBeforeReload) window.scrollTo(0, scrollYBeforeReload);
+    });
+    
+    theTextReloadObs.observe(theText, {childList: true, subtree: true});
+
+    if (mediaTablet.matches) {
+      tooltipPos = {my: 'center bottom', at: 'center top-10', collision: 'flipfit flip'};
+    }
+    
     if (have_audio_file()) {
       // Don't actually load the source -- for some reason,
       // the ajax page load was causing the audio src to
@@ -406,7 +418,7 @@ <h2>&#127881;</h2>
         show_hide_title(actualPage);
 
         if (initial_page_load) {
-          prepareTextInteractions();
+          prepareTextInteractions(tooltipPos);
         }
 
         // Magic hack for player source to load consistently