Merge branch 'eread/migrate-tooltip-time-track-comparison' into 'master'

Migrate time tracking tooltip

See merge request gitlab-org/gitlab!44871

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

 <script>
-import { GlProgressBar } from '@gitlab/ui';
+import { GlProgressBar, GlTooltipDirective } from '@gitlab/ui';
 import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
-import tooltip from '../../../vue_shared/directives/tooltip';
 import { s__, sprintf } from '~/locale';
 
 export default {
@@ -10,7 +9,7 @@ export default {
     GlProgressBar,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     timeSpent: {
@@ -73,7 +72,7 @@ export default {
 <template>
   <div class="time-tracking-comparison-pane">
     <div
-      v-tooltip
+      v-gl-tooltip
       :title="timeRemainingTooltip"
       :class="timeRemainingStatusClass"
       class="compare-meter"

spec/features/boards/sidebar_spec.rb

@@ -229,7 +229,7 @@ RSpec.describe 'Issue Boards', :js do
   end
 
   context 'time tracking' do
-    let(:compare_meter_tooltip) { find('.time-tracking .time-tracking-content .compare-meter')['data-original-title'] }
+    let(:compare_meter_tooltip) { find('.time-tracking .time-tracking-content .compare-meter')['title'] }
 
     before do
       issue2.timelogs.create(time_spent: 14400, user: user)

spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js

@@ -155,8 +155,7 @@ describe('Issuable Time Tracker', () => {
         it('should show the correct tooltip text', done => {
           Vue.nextTick(() => {
             expect(vm.showComparisonState).toBe(true);
-            const $title = vm.$el.querySelector('.time-tracking-content .compare-meter').dataset
-              .originalTitle;
+            const $title = vm.$el.querySelector('.time-tracking-content .compare-meter').title;
 
             expect($title).toBe('Time remaining: 26h 23m');
             done();