1 files changed, 9 insertions, 24 deletions
diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
index cad4439ecea..de9c84dd157 100644
--- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
+++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
@@ -1,8 +1,7 @@
 <script>
-import $ from 'jquery';
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import Clipboard from 'clipboard';
-import { __ } from '~/locale';
+import { uniqueId } from 'lodash';
 
 export default {
   components: {
@@ -17,6 +16,11 @@ export default {
       required: false,
       default: '',
     },
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId('modal-copy-button-'),
+    },
     container: {
       type: String,
       required: false,
@@ -52,7 +56,6 @@ export default {
       default: null,
     },
   },
-  copySuccessText: __('Copied'),
   computed: {
     modalDomId() {
       return this.modalId ? `#${this.modalId}` : '';
@@ -68,11 +71,11 @@ export default {
       });
       this.clipboard
         .on('success', e => {
-          this.updateTooltip(e.trigger);
+          this.$root.$emit('bv::hide::tooltip', this.id);
           this.$emit('success', e);
           // Clear the selection and blur the trigger so it loses its border
           e.clearSelection();
-          $(e.trigger).blur();
+          e.trigger.blur();
         })
         .on('error', e => this.$emit('error', e));
     });
@@ -82,29 +85,11 @@ export default {
       this.clipboard.destroy();
     }
   },
-  methods: {
-    updateTooltip(target) {
-      const $target = $(target);
-      const originalTitle = $target.data('originalTitle');
-
-      if ($target.tooltip) {
-        /**
-         *  The original tooltip will continue staying there unless we remove it by hand.
-         *  $target.tooltip('hide') isn't working.
-         */
-        $('.tooltip').remove();
-        $target.attr('title', this.$options.copySuccessText);
-        $target.tooltip('_fixTitle');
-        $target.tooltip('show');
-        $target.attr('title', originalTitle);
-        $target.tooltip('_fixTitle');
-      }
-    },
-  },
 };
 </script>
 <template>
   <gl-button
+    :id="id"
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClasses"
     :data-clipboard-target="target"