Merge branch '229040-activity-bar-tooltip' into 'master'

Remove jquery tooltip from IDE activity bar

See merge request gitlab-org/gitlab!44526

app/assets/javascripts/ide/components/activity_bar.vue

 <script>
-import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { leftSidebarViews } from '../constants';
 
 export default {
@@ -10,7 +8,7 @@ export default {
     GlIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   computed: {
     ...mapState(['currentActivityView']),
@@ -22,9 +20,7 @@ export default {
 
       this.updateActivityBarView(view);
 
-      // TODO: We must use JQuery here to interact with the Bootstrap tooltip API
-      // https://gitlab.com/gitlab-org/gitlab/-/issues/217577
-      $(e.currentTarget).tooltip('hide');
+      this.$root.$emit('bv::hide::tooltip');
     },
   },
   leftSidebarViews,
@@ -36,7 +32,7 @@ export default {
     <ul class="list-unstyled">
       <li>
         <button
-          v-tooltip
+          v-gl-tooltip.right.viewport
           :class="{
             active: currentActivityView === $options.leftSidebarViews.edit.name,
           }"
@@ -54,7 +50,7 @@ export default {
       </li>
       <li>
         <button
-          v-tooltip
+          v-gl-tooltip.right.viewport
           :class="{
             active: currentActivityView === $options.leftSidebarViews.review.name,
           }"
@@ -71,7 +67,7 @@ export default {
       </li>
       <li>
         <button
-          v-tooltip
+          v-gl-tooltip.right.viewport
           :class="{
             active: currentActivityView === $options.leftSidebarViews.commit.name,
           }"

changelogs/unreleased/229040-activity-bar-tooltip.yml

+---
+title: Remove jquery tooltip from IDE activity bar
+merge_request: 44526
+author:
+type: changed