1 files changed, 26 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 3a7143c450e..31d9b9d9c48 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',
+    name: 'ClipboardButton',
+    directives: {
+      tooltip,
+    },
     props: {
       text: {
         type: String,
@@ -14,6 +18,16 @@
         type: String,
         required: true,
       },
+      tooltipPlacement: {
+        type: String,
+        required: false,
+        default: 'top',
+      },
+      tooltipContainer: {
+        type: [String, Boolean],
+        required: false,
+        default: false,
+      },
     },
   };
 </script>
@@ -22,11 +36,16 @@
   <button
     type="button"
     class="btn btn-transparent btn-clipboard"
-    :data-title="title"
-    :data-clipboard-text="text">
-      <i
-        aria-hidden="true"
-        class="fa fa-clipboard">
-      </i>
+    :title="title"
+    :data-clipboard-text="text"
+    v-tooltip
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+  >
+    <i
+      aria-hidden="true"
+      class="fa fa-clipboard"
+    >
+    </i>
   </button>
 </template>