1 files changed, 8 insertions, 6 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index 6f79310b1cc..d335c3f55af 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -1,8 +1,12 @@
 <script>
 import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
+import tooltip from '../../../vue_shared/directives/tooltip';
 
 export default {
   name: 'TimeTrackingComparisonPane',
+  directives: {
+    tooltip,
+  },
   props: {
     timeSpent: {
       type: Number,
@@ -50,19 +54,17 @@ export default {
 <template>
   <div class="time-tracking-comparison-pane">
     <div
+      v-tooltip
+      :title="timeRemainingTooltip"
+      :class="timeRemainingStatusClass"
       class="compare-meter"
       data-toggle="tooltip"
       data-placement="top"
       role="timeRemainingDisplay"
-      :aria-valuenow="timeRemainingTooltip"
-      :title="timeRemainingTooltip"
-      :data-original-title="timeRemainingTooltip"
-      :class="timeRemainingStatusClass"
     >
       <div
-        class="meter-container"
-        role="timeSpentPercent"
         :aria-valuenow="timeRemainingPercent"
+        class="meter-container"
       >
         <div
           :style="{ width: timeRemainingPercent }"