1 files changed, 7 insertions, 28 deletions
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
index 80c051f86b5..01787c97bca 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue
@@ -3,7 +3,7 @@
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
 import { GlTooltipDirective, GlLink } from '@gitlab/ui';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
-import { __, sprintf } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ReviewerAvatar from './reviewer_avatar.vue';
 
 export default {
@@ -23,16 +23,6 @@ export default {
       type: String,
       required: true,
     },
-    tooltipPlacement: {
-      type: String,
-      default: 'bottom',
-      required: false,
-    },
-    tooltipHasName: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
     issuableType: {
       type: String,
       default: TYPE_ISSUE,
@@ -45,21 +35,8 @@ export default {
         this.issuableType === TYPE_MERGE_REQUEST && !this.user.mergeRequestInteraction?.canMerge
       );
     },
-    tooltipTitle() {
-      if (this.cannotMerge && this.tooltipHasName) {
-        return sprintf(__('%{userName} (cannot merge)'), { userName: this.user.name });
-      } else if (this.cannotMerge) {
-        return __('Cannot merge');
-      }
-
-      return '';
-    },
-    tooltipOption() {
-      return {
-        container: 'body',
-        placement: this.tooltipPlacement,
-        boundary: 'viewport',
-      };
+    reviewerId() {
+      return getIdFromGraphQLId(this.user.id);
     },
     reviewerUrl() {
       return this.user.webUrl;
@@ -71,9 +48,11 @@ export default {
 <template>
   <!-- must be `d-inline-block` or parent flex-basis causes width issues -->
   <gl-link
-    v-gl-tooltip="tooltipOption"
     :href="reviewerUrl"
-    :title="tooltipTitle"
+    :data-user-id="reviewerId"
+    :data-username="user.username"
+    :data-cannot-merge="cannotMerge"
+    data-placement="left"
     class="gl-display-inline-block js-user-link"
   >
     <!-- use d-flex so that slot can be appropriately styled -->