Replacing vue shared tooltip on calendar icon

app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   name: 'CollapsedCalendarIcon',
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     GlIcon,
@@ -41,16 +40,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-tooltip
-    :class="containerClass"
-    :title="tooltipText"
-    data-container="body"
-    data-placement="left"
-    data-html="true"
-    data-boundary="viewport"
-    @click="click"
-  >
+  <div v-gl-tooltip.left.viewport :class="containerClass" :title="tooltipText" @click="click">
     <gl-icon v-if="showIcon" name="calendar" />
     <slot>
       <span> {{ text }} </span>

changelogs/unreleased/Replace-calendar-icon-tooltip-sidebar-ab.yml

+---
+title: Replacing vue shared tooltip on calendar icon
+merge_request: 45059
+author:
+type: other

spec/frontend/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js

@@ -80,7 +80,7 @@ describe('collapsedGroupedDatePicker', () => {
     it('should have tooltip as `Start and due date`', () => {
       const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
 
-      expect(icons[0].dataset.originalTitle).toBe('Start and due date');
+      expect(icons[0].title).toBe('Start and due date');
     });
   });
 });