2 files changed, 31 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index e18852af6e9..577709dfc1f 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -1,10 +1,14 @@
 <script>
+  import tooltip from '../directives/tooltip';
   /**
    * Falls back to the code used in `copy_to_clipboard.js`
    */
 
   export default {
     name: 'ClipboardButton',
+    directives: {
+      tooltip,
+    },
     props: {
       text: {
         type: String,
@@ -22,8 +26,9 @@
   <button
     type="button"
     class="btn btn-transparent btn-clipboard"
-    :data-title="title"
+    :title="title"
     :data-clipboard-text="text"
+    v-tooltip
   >
     <i
       aria-hidden="true"
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
new file mode 100644
index 00000000000..67d94a0974e
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('clipboard button', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(clipboardButton);
+    vm = mountComponent(Component, {
+      text: 'copy me',
+      title: 'Copy this value into Clipboard!',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a button for clipboard with a tooltip', () => {
+    expect(vm.$el.tagName).toEqual('BUTTON');
+    expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
+    expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
+  });
+});