Migrate labels sidebar tooltip

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     GlIcon,
@@ -45,12 +44,9 @@ export default {
 
 <template>
   <div
-    v-tooltip
+    v-gl-tooltip.left.viewport
     :title="labelsList"
     class="sidebar-collapsed-icon"
-    data-placement="left"
-    data-container="body"
-    data-boundary="viewport"
     @click="handleClick"
   >
     <gl-icon name="labels" />

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js

@@ -81,9 +81,7 @@ describe('DropdownValueCollapsedComponent', () => {
 
   describe('template', () => {
     it('renders component container element with tooltip`', () => {
-      expect(vm.$el.dataset.placement).toBe('left');
-      expect(vm.$el.dataset.container).toBe('body');
-      expect(vm.$el.dataset.originalTitle).toBe(vm.labelsList);
+      expect(vm.$el.title).toBe(vm.labelsList);
     });
 
     it('renders tags icon element', () => {