Dynamically position all tooltips

frontend/src/components/c-summary-charts.vue

@@ -21,89 +21,119 @@
           v-bind:class=" { warn: repo[0].name === '-' }"
         ) {{ getAuthorDisplayName(repo) }} ({{ repo[0].name }})
       .summary-charts__title--contribution
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-total-contribution`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-total-contribution`)"
+        )
           | [{{ getGroupTotalContribution(repo) }} lines]
           span.tooltip-text(
             v-if="filterGroupSelection === 'groupByRepos' && !isChartGroupWidgetMode"
-          ) Total contribution of group
+          )(v-bind:ref="`summary-charts-${i}-total-contribution`") Total contribution of group
           span.tooltip-text(
             v-else-if="filterGroupSelection === 'groupByAuthors' && !isChartGroupWidgetMode"
-          ) Total contribution of author
+          )(v-bind:ref="`summary-charts-${i}-total-contribution`") Total contribution of author
       a(
         v-if="!isGroupMerged(getGroupName(repo)) && !isChartGroupWidgetMode",
         v-on:click="handleMergeGroup(getGroupName(repo))"
       )
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-merge-group`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-merge-group`)"
+        )
           font-awesome-icon.icon-button(:icon="['fas', 'chevron-up']")
-          span.tooltip-text Click to merge group
+          span.tooltip-text(v-bind:ref="`summary-charts-${i}-merge-group`") Click to merge group
       a(
         v-if="isGroupMerged(getGroupName(repo)) && !isChartGroupWidgetMode",
         v-on:click="handleExpandGroup(getGroupName(repo))"
       )
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-expand-group`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-expand-group`)"
+        )
           font-awesome-icon.icon-button(:icon="['fas', 'chevron-down']")
-          span.tooltip-text Click to expand group
+          span.tooltip-text(v-bind:ref="`summary-charts-${i}-expand-group`") Click to expand group
       a(
         v-if="filterGroupSelection === 'groupByRepos'",
         v-bind:class="!isBrokenLink(getRepoLink(repo[0])) ? '' : 'broken-link'",
         v-bind:href="getRepoLink(repo[0])", target="_blank"
       )
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-repo-link`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-repo-link`)"
+        )
           font-awesome-icon.icon-button(:icon="getRepoIcon(repo[0])")
           span.tooltip-text(
             v-if="!isChartGroupWidgetMode",
+            v-bind:ref="`summary-charts-${i}-repo-link`"
           ) {{getGroupRepoLinkMessage(repo[0])}}
       a(
         v-else-if="filterGroupSelection === 'groupByAuthors'",
         v-bind:class="!isBrokenLink(getAuthorProfileLink(repo[0], repo[0].name)) ? '' : 'broken-link'",
         v-bind:href="getAuthorProfileLink(repo[0], repo[0].name)", target="_blank"
       )
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-author-link`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-author-link`)"
+        )
           font-awesome-icon.icon-button(icon="user")
           span.tooltip-text(
             v-if="!isChartGroupWidgetMode",
+            v-bind:ref="`summary-charts-${i}-author-link`"
           ) {{getAuthorProfileLinkMessage(repo[0])}}
       template(v-if="isGroupMerged(getGroupName(repo))")
         a(
           v-if="filterGroupSelection !== 'groupByAuthors' && !isChartGroupWidgetMode",
           onclick="deactivateAllOverlays()",
           v-on:click="openTabAuthorship(repo[0], repo, 0, isGroupMerged(getGroupName(repo)))"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`summary-charts-${i}-group-code`)",
+            v-on:mouseout="resetTooltip(`summary-charts-${i}-group-code`)"
+          )
             font-awesome-icon.icon-button(
               icon="code",
               v-bind:class="{ 'active-icon': isSelectedTab(repo[0].name, repo[0].repoName, 'authorship', true) }"
             )
-            span.tooltip-text Click to view group's code
+            span.tooltip-text(v-bind:ref="`summary-charts-${i}-group-code`") Click to view group's code
         a(
           v-if="!isChartGroupWidgetMode",
           onclick="deactivateAllOverlays()",
           v-on:click="openTabZoom(repo[0], filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`summary-charts-${i}-commit-breakdown`)",
+            v-on:mouseout="resetTooltip(`summary-charts-${i}-commit-breakdown`)"
+          )
             font-awesome-icon.icon-button(
               icon="list-ul",
               v-bind:class="{ 'active-icon': isSelectedTab(repo[0].name, repo[0].repoName, 'zoom', true) }"
             )
-            span.tooltip-text Click to view breakdown of commits
+            span.tooltip-text(v-bind:ref="`summary-charts-${i}-commit-breakdown`") Click to view breakdown of commits
       a(
         v-if="isChartGroupWidgetMode && !isChartWidgetMode",
         v-bind:href="getReportLink()", target="_blank"
       )
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-commit-breakdown-group-widget`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-commit-breakdown-group-widget`)"
+        )
           font-awesome-icon.icon-button(
             icon="arrow-up-right-from-square",
           )
           span.tooltip-text(
             v-if="!isChartGroupWidgetMode",
+            v-bind:ref="`summary-charts-${i}-commit-breakdown-group-widget`"
           ) Click to view breakdown of commits on RepoSense
       a(
         v-if="!isChartGroupWidgetMode",
         v-on:click="getEmbeddedIframe(i)"
       )
-        .tooltip(v-bind:id="'tooltip-' + i")
+        .tooltip(v-bind:id="'tooltip-' + i",
+          v-on:mouseover="onTooltipHover(`summary-charts-${i}-copy-iframe`)",
+          v-on:mouseout="resetTooltip(`summary-charts-${i}-copy-iframe`)"
+        )
           font-awesome-icon.icon-button(icon="clipboard")
-          span.tooltip-text Click to copy iframe link for group
+          span.tooltip-text(v-bind:ref="`summary-charts-${i}-copy-iframe`") Click to copy iframe link for group
 
       .tooltip.summary-chart__title--percentile(
           v-if="sortGroupSelection.includes('totalCommits')"
@@ -143,61 +173,87 @@
           v-bind:class="!isBrokenLink(getRepoLink(user)) ? '' : 'broken-link'",
           v-bind:href="getRepoLink(user)", target="_blank"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-repo-link`)",
+            v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-repo-link`)"
+          )
             font-awesome-icon.icon-button(:icon="getRepoIcon(repo[0])")
             span.tooltip-text(
               v-if="!isChartGroupWidgetMode",
+              v-bind:ref="`repo-${i}-author-${j}-repo-link`"
             ) {{getRepoLinkMessage(user)}}
         a(
           v-if="filterGroupSelection !== 'groupByAuthors'",
           v-bind:class="!isBrokenLink(getAuthorProfileLink(user, user.name)) ? '' : 'broken-link'",
           v-bind:href="getAuthorProfileLink(user, user.name)", target="_blank"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-author-link`)",
+            v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-author-link`)"
+          )
             font-awesome-icon.icon-button(icon="user")
             span.tooltip-text(
               v-if="!isChartGroupWidgetMode",
+              v-bind:ref="`repo-${i}-author-${j}-author-link`"
             ) {{getAuthorProfileLinkMessage(user)}}
         a(
           v-if="!isChartGroupWidgetMode",
           onclick="deactivateAllOverlays()",
           v-on:click="openTabAuthorship(user, repo, j, isGroupMerged(getGroupName(repo)))"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-author-contribution`)",
+            v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-author-contribution`)"
+          )
             font-awesome-icon.icon-button(
               icon="code",
               v-bind:class="{ 'active-icon': isSelectedTab(user.name, user.repoName, 'authorship', false) }"
             )
-            span.tooltip-text Click to view author's contribution.
+            span.tooltip-text(
+              v-bind:ref="`repo-${i}-author-${j}-author-contribution`"
+              ) Click to view author's contribution.
         a(
           v-if="!isChartGroupWidgetMode",
           onclick="deactivateAllOverlays()",
           v-on:click="openTabZoom(user, filterSinceDate, filterUntilDate, isGroupMerged(getGroupName(repo)))"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-commit-breakdown`)",
+            v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-commit-breakdown`)"
+          )
             font-awesome-icon.icon-button(
               icon="list-ul",
               v-bind:class="{ 'active-icon': isSelectedTab(user.name, user.repoName, 'zoom', false) }"
             )
-            span.tooltip-text Click to view breakdown of commits
+            span.tooltip-text(
+              v-bind:ref="`repo-${i}-author-${j}-commit-breakdown`"
+            ) Click to view breakdown of commits
         a(
           v-if="isChartGroupWidgetMode",
           v-bind:href="getReportLink()", target="_blank"
         )
-          .tooltip
+          .tooltip(
+            v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-commit-breakdown-group-widget`)",
+            v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-commit-breakdown-group-widget`)"
+          )
             font-awesome-icon.icon-button(
               icon="arrow-up-right-from-square",
             )
             span.tooltip-text(
               v-if="!isChartGroupWidgetMode",
+              v-bind:ref="`repo-${i}-author-${j}-commit-breakdown-group-widget`"
             ) Click to view breakdown of commits on RepoSense
         a(
           v-if="!isChartGroupWidgetMode",
           v-on:click="getEmbeddedIframe(i , j)"
         )
-          .tooltip(v-bind:id="'tooltip-' + i + '-' + j")
+          .tooltip(
+            v-bind:id="'tooltip-' + i + '-' + j",
+            v-on:mouseover="onTooltipHover(`repo-${i}-author-${j}-iframe-link`)",
+            v-on:mouseout="resetTooltip(`repo-${i}-author-${j}-iframe-link`)"
+          )
             font-awesome-icon.icon-button(icon="clipboard")
-            span.tooltip-text Click to copy iframe link
+            span.tooltip-text(v-bind:ref="`repo-${i}-author-${j}-iframe-link`") Click to copy iframe link
         .tooltip.summary-chart__title--percentile(
           v-if="filterGroupSelection === 'groupByNone' && sortGroupSelection.includes('totalCommits')"
         ) {{ getPercentile(j) }} %&nbsp
@@ -239,6 +295,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from './c-ramp.vue';
 import cStackedBarChart from './c-stacked-bar-chart.vue';
 import { Bar, Repo, User } from '../types/types';
@@ -252,7 +309,7 @@ export default defineComponent({
     cRamp,
     cStackedBarChart,
   },
-  mixins: [brokenLinkDisabler],
+  mixins: [brokenLinkDisabler, tooltipPositioner],
   props: {
     checkedFileTypes: {
       type: Array<string>,

frontend/src/mixin/dynamicTooltipMixin.ts

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    onTooltipHover(refName: string): void {
+      const tooltipTextElement = (this.$refs[refName] as HTMLElement[])[0];
+      if (this.isElementAboveViewport(tooltipTextElement)) {
+        tooltipTextElement.classList.add('bottom-aligned');
+      }
+    },
+    resetTooltip(refName: string): void {
+      const tooltipTextElement = (this.$refs[refName] as HTMLElement[])[0];
+      tooltipTextElement.classList.remove('bottom-aligned');
+    },
+    isElementAboveViewport(el: Element): boolean {
+      return el.getBoundingClientRect().top <= 0;
+    },
+  },
+});

frontend/src/views/c-authorship.vue

@@ -148,18 +148,28 @@
               v-bind:class="!isBrokenLink(getHistoryLink(file)) ? '' : 'broken-link'",
               v-bind:href="getHistoryLink(file)", target="_blank"
             )
-              .tooltip
+              .tooltip(
+                v-on:mouseover="onTooltipHover(`${file.path}-view-history-tooltip`)",
+                v-on:mouseout="resetTooltip(`${file.path}-view-history-tooltip`)"
+              )
                 font-awesome-icon.button(icon="history")
-                span.tooltip-text {{getLinkMessage(getHistoryLink(file), 'Click to view the history view of file')}}
+                span.tooltip-text(
+                  v-bind:ref="`${file.path}-view-history-tooltip`"
+                ) {{getLinkMessage(getHistoryLink(file), 'Click to view the history view of file')}}
             a(
               v-if='!file.isBinary',
               v-bind:class="!isBrokenLink(getBlameLink(file)) ? '' : 'broken-link'",
               v-bind:href="getBlameLink(file)", target="_blank",
               title="click to view the blame view of file"
             )
-              .tooltip
+              .tooltip(
+                v-on:mouseover="onTooltipHover(`${file.path}-view-blame-tooltip`)",
+                v-on:mouseout="resetTooltip(`${file.path}-view-blame-tooltip`)"
+              )
                 font-awesome-icon.button(icon="user-edit")
-                span.tooltip-text {{getLinkMessage(getBlameLink(file), 'Click to view the blame view of file')}}
+                span.tooltip-text(
+                  v-bind:ref="`${file.path}-view-blame-tooltip`"
+                ) {{getLinkMessage(getBlameLink(file), 'Click to view the blame view of file')}}
           .author-breakdown(v-if="info.isMergeGroup")
             .author-breakdown__legend(
               v-for="author in getAuthors(file)",
@@ -186,6 +196,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import minimatch from 'minimatch';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cSegmentCollection from '../components/c-segment-collection.vue';
 import Segment from '../utils/segment';
 import getNonRepeatingColor from '../utils/random-color-generator';
@@ -229,7 +240,7 @@ export default defineComponent({
   components: {
     cSegmentCollection,
   },
-  mixins: [brokenLinkDisabler],
+  mixins: [brokenLinkDisabler, tooltipPositioner],
   emits: [
     'deactivate-tab',
   ],
@@ -488,22 +499,6 @@ export default defineComponent({
       }
     },
 
-    onTooltipHover(refName: string): void {
-      const tooltipTextElement = (this.$refs[refName] as HTMLElement[])[0];
-      if (this.isElementAboveViewport(tooltipTextElement)) {
-        tooltipTextElement.classList.add('bottom-aligned');
-      }
-    },
-
-    resetTooltip(refName: string): void {
-      const tooltipTextElement = (this.$refs[refName] as HTMLElement[])[0];
-      tooltipTextElement.classList.remove('bottom-aligned');
-    },
-
-    isElementAboveViewport(el: Element): boolean {
-      return el.getBoundingClientRect().top <= 0;
-    },
-
     isUnknownAuthor(name: string): boolean {
       return name === '-';
     },

frontend/src/views/c-zoom.vue

@@ -126,9 +126,12 @@
         v-if="slice.messageBody !== ''",
         v-on:click="toggleSelectedCommitMessageBody(slice)"
       )
-        .tooltip
+        .tooltip(
+          v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
+          v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
+        )
           font-awesome-icon.commit-message--button(icon="ellipsis-h")
-          span.tooltip-text Click to show/hide the commit message body
+          span.tooltip-text(v-bind:ref="`${slice.hash}-show-hide-message-body`") Click to show/hide the commit message body
       .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
         pre {{ slice.messageBody }}
           .dashed-border
@@ -145,6 +148,7 @@ import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from '../components/c-ramp.vue';
 import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
 import User from '../utils/user';
@@ -177,7 +181,7 @@ export default defineComponent({
     cRamp,
     cStackedBarChart,
   },
-  mixins: [brokenLinkDisabler],
+  mixins: [brokenLinkDisabler, tooltipPositioner],
   data() {
     return {
       ...zoomInitialState(),