1 files changed, 6 insertions, 4 deletions
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index 3d60eb02db8..bde00ea87ff 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { GlTooltipDirective } from '@gitlab/ui';
+import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
 import { glEmojiTag } from '../../emoji';
@@ -10,7 +10,7 @@ export default {
     Icon,
   },
   directives: {
-    GlTooltip: GlTooltipDirective,
+    tooltip,
   },
   props: {
     awards: {
@@ -167,9 +167,11 @@ export default {
       <button
         v-for="(awardList, awardName, index) in groupedAwards"
         :key="index"
-        v-gl-tooltip.bottom="{ boundary: 'viewport' }"
+        v-tooltip
         :class="getAwardClassBindings(awardList)"
         :title="awardTitle(awardList)"
+        data-boundary="viewport"
+        data-placement="bottom"
         class="btn award-control"
         type="button"
         @click="handleAward(awardName);"
@@ -179,7 +181,7 @@ export default {
       </button>
       <div v-if="canAwardEmoji" class="award-menu-holder">
         <button
-          v-gl-tooltip
+          v-tooltip
           :class="{ 'js-user-authored': isAuthoredByMe }"
           class="award-control btn js-add-award"
           title="Add reaction"