[#1928] Fix tooltip zIndex such that it doesn't occlude next file tit…

…le (#2057)

Currently, if one hovers over a tooltip of the pinned title of
a file whose content is scrolled almost completely, such that 
the title of the next file is just below the pinned title, the 
tooltip is not displayed appropriately, as the title of the next 
file obstructs it.

Let's fix this issue.

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')

frontend/src/styles/_z-indices.scss

@@ -16,4 +16,5 @@ $z-indices: (
  'header': 100,
  'loader': 10,
  'tooltip': 100,
+ 'max-value': 250,
 );

frontend/src/styles/style.scss

@@ -107,7 +107,6 @@ a.broken-link {
  }
 
  &.bottom-aligned {
- @include medium-font;
  bottom: auto;
  top: 125%;
  }

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;