Merge branch '41608-clipboard-vue-button' into 'master'

Resolve "clipboard-button tooltip is broken"

Closes #41608

See merge request gitlab-org/gitlab-ce!16352

1 files changed, 18 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..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',
+    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,8 +36,11 @@
   <button
     type="button"
     class="btn btn-transparent btn-clipboard"
-    :data-title="title"
+    :title="title"
     :data-clipboard-text="text"
+    v-tooltip
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
   >
     <i
       aria-hidden="true"