Adds props to allow tooltip config. Breaks tests into specific cases41608-clipboard-vue-button

2 files changed, 19 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 577709dfc1f..31d9b9d9c48 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -18,6 +18,16 @@
         type: String,
         required: true,
       },
+      tooltipPlacement: {
+        type: String,
+        required: false,
+        default: 'top',
+      },
+      tooltipContainer: {
+        type: [String, Boolean],
+        required: false,
+        default: false,
+      },
     },
   };
 </script>
@@ -29,6 +39,8 @@
     :title="title"
     :data-clipboard-text="text"
     v-tooltip
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
   >
     <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
index 67d94a0974e..08e4e1f8337 100644
--- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -17,9 +17,15 @@ describe('clipboard button', () => {
     vm.$destroy();
   });
 
-  it('renders a button for clipboard with a tooltip', () => {
+  it('renders a button for clipboard', () => {
     expect(vm.$el.tagName).toEqual('BUTTON');
     expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
+    expect(vm.$el.querySelector('i').className).toEqual('fa fa-clipboard');
+  });
+
+  it('should have a tooltip with default values', () => {
     expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
+    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+    expect(vm.$el.getAttribute('data-container')).toEqual(null);
   });
 });