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..0e139cd7f5e 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,
@@ -51,17 +55,12 @@ export default {
   <div class="time-tracking-comparison-pane">
     <div
       class="compare-meter"
-      data-toggle="tooltip"
-      data-placement="top"
-      role="timeRemainingDisplay"
-      :aria-valuenow="timeRemainingTooltip"
       :title="timeRemainingTooltip"
-      :data-original-title="timeRemainingTooltip"
+      v-tooltip
       :class="timeRemainingStatusClass"
     >
       <div
         class="meter-container"
-        role="timeSpentPercent"
         :aria-valuenow="timeRemainingPercent"
       >
         <div