diff --git a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
index 5915db587e..ac8599ef95 100644
--- a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
+++ b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
@@ -281,7 +281,7 @@ describe('range changes in chartview should reflect in zoom', () => {
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
       .click(120, 20)
-      .click(185, 20);
+      .click(170, 20);
 
     cy.get('#tab-zoom')
       .should('be.visible');
@@ -306,7 +306,7 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('body').type(zoomKey, { release: false })
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(185, 20)
+      .click(170, 20)
       .click(250, 20);
 
     cy.get('#tab-zoom')
@@ -333,7 +333,7 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('body').type(zoomKey, { release: false })
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(185, 20)
+      .click(170, 20)
       .click(225, 20);
 
     cy.get('#tab-zoom')
diff --git a/frontend/src/styles/_z-indices.scss b/frontend/src/styles/_z-indices.scss
index aca88ed396..b918fe10b6 100644
--- a/frontend/src/styles/_z-indices.scss
+++ b/frontend/src/styles/_z-indices.scss
@@ -16,4 +16,5 @@ $z-indices: (
   'header': 100,
   'loader': 10,
   'tooltip': 100,
+  'max-value': 250,
 );
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index e3a6789c60..5cd38a53a7 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -107,7 +107,6 @@ a.broken-link {
     }
 
     &.bottom-aligned {
-      @include medium-font;
       bottom: auto;
       top: 125%;
     }
diff --git a/frontend/src/views/c-authorship.vue b/frontend/src/views/c-authorship.vue
index 9911831d72..9fe5082b4c 100644
--- a/frontend/src/views/c-authorship.vue
+++ b/frontend/src/views/c-authorship.vue
@@ -101,19 +101,22 @@
     .empty(v-if="info.files.length === 0") nothing to see here :(
     template(v-for="(file, i) in selectedFiles", v-bind:key="file.path")
       .file(v-bind:ref="file.path")
-        .title(v-bind:class="{'sticky':\ file.active}")
+        .title(
+          v-bind:class="{'sticky':\ file.active}",
+          v-bind:ref="`${file.path}-title`"
+          )
           span.caret(v-on:click="toggleFileActiveProperty(file)")
             .tooltip(
               v-show="file.active",
-              v-on:mouseover="onTooltipHover(`${file.path}-hide-file-tooltip`)",
-              v-on:mouseout="resetTooltip(`${file.path}-hide-file-tooltip`)"
+              v-on:mouseover="onTitleTooltipHover(`${file.path}-hide-file-tooltip`, `${file.path}-title`)",
+              v-on:mouseout="resetTitleTooltip(`${file.path}-hide-file-tooltip`, `${file.path}-title`)"
             )
               font-awesome-icon(icon="caret-down", fixed-width)
               span.tooltip-text(v-bind:ref="`${file.path}-hide-file-tooltip`") Click to hide file details
             .tooltip(
               v-show="!file.active",
-              v-on:mouseover="onTooltipHover(`${file.path}-show-file-tooltip`)",
-              v-on:mouseout="resetTooltip(`${file.path}-show-file-tooltip`)"
+              v-on:mouseover="onTitleTooltipHover(`${file.path}-show-file-tooltip`, `${file.path}-title`)",
+              v-on:mouseout="resetTitleTooltip(`${file.path}-show-file-tooltip`, `${file.path}-title`)"
             )
               font-awesome-icon(icon="caret-right", fixed-width)
               span.tooltip-text(v-bind:ref="`${file.path}-show-file-tooltip`") Click to show file details
@@ -149,8 +152,8 @@
               v-bind:href="getHistoryLink(file)", target="_blank"
             )
               .tooltip(
-                v-on:mouseover="onTooltipHover(`${file.path}-view-history-tooltip`)",
-                v-on:mouseout="resetTooltip(`${file.path}-view-history-tooltip`)"
+                v-on:mouseover="onTitleTooltipHover(`${file.path}-view-history-tooltip`, `${file.path}-title`)",
+                v-on:mouseout="resetTitleTooltip(`${file.path}-view-history-tooltip`, `${file.path}-title`)"
               )
                 font-awesome-icon.button(icon="history")
                 span.tooltip-text(
@@ -163,8 +166,8 @@
               title="click to view the blame view of file"
             )
               .tooltip(
-                v-on:mouseover="onTooltipHover(`${file.path}-view-blame-tooltip`)",
-                v-on:mouseout="resetTooltip(`${file.path}-view-blame-tooltip`)"
+                v-on:mouseover="onTitleTooltipHover(`${file.path}-view-blame-tooltip`, `${file.path}-title`)",
+                v-on:mouseout="resetTitleTooltip(`${file.path}-view-blame-tooltip`, `${file.path}-title`)"
               )
                 font-awesome-icon.button(icon="user-edit")
                 span.tooltip-text(
@@ -499,6 +502,18 @@ export default defineComponent({
       }
     },
 
+    onTitleTooltipHover(tooltipTextElement: string, titleTextElement: string): void {
+      this.onTooltipHover(tooltipTextElement);
+      const titleElement = (this.$refs[titleTextElement] as HTMLElement[])[0];
+      titleElement.classList.add('max-zIndex');
+    },
+
+    resetTitleTooltip(tooltipTextElement: string, titleTextElement: string): void {
+      this.resetTooltip(tooltipTextElement);
+      const titleElement = (this.$refs[titleTextElement] as HTMLElement[])[0];
+      titleElement.classList.remove('max-zIndex');
+    },
+
     isUnknownAuthor(name: string): boolean {
       return name === '-';
     },
@@ -882,6 +897,10 @@ export default defineComponent({
         position: sticky;
       }
 
+      &.max-zIndex {
+        z-index: z-index('max-value');
+      }
+
       .caret {
         cursor: pointer;
         order: -2;