Display tooltip for "Copy to Clipboard" button (!5164)

5 files changed, 9 insertions, 24 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 3e4a10bb5a3..16a297af4a1 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -7,6 +7,7 @@ v 8.10.0 (unreleased)
   - Add Application Setting to configure default Repository Path for new projects
   - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
   - Align flash messages with left side of page content !4959 (winniehell)
+  - Display tooltip for "Copy to Clipboard" button !5164 (winniehell)
   - Display last commit of deleted branch in push events !4699 (winniehell)
   - Escape file extension when parsing search results !5141 (winniehell)
   - Apply the trusted_proxies config to the rack request object for use with rack_attack
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 85bbf70e188..0298577c494 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -61,7 +61,7 @@
     font-size: 0;
   }
 
-  .btn-transparent {
+  .btn-clipboard, .btn-transparent {
     padding-left: 0;
     padding-right: 0;
   }
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index 0f097f86816..b478580978b 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -15,29 +15,13 @@ module ButtonHelper
   #
   # See http://clipboardjs.com/#usage
   def clipboard_button(data = {})
+    data = { toggle: 'tooltip', placement: 'bottom', container: 'body' }.merge(data)
     content_tag :button,
       icon('clipboard'),
       class: "btn btn-clipboard",
       data: data,
-      type: :button
-  end
-
-  # Output a "Copy to Clipboard" button with a custom CSS class
-  #
-  # data - Data attributes passed to `content_tag`
-  # css_class - Class passed to the `content_tag`
-  #
-  # Examples:
-  # 
-  #   # Define the target element
-  #   clipboard_button_with_class({clipboard_target: "div#foo"}, css_class: "btn-clipboard")
-  #   # => "<button class='btn btn-clipboard' data-clipboard-target='div#foo'>...</button>"
-  def clipboard_button_with_class(data = {}, css_class: 'btn-clipboard')
-    content_tag :button,
-      icon('clipboard'),
-      class: "btn #{css_class}",
-      data: data,
-      type: :button
+      type: :button,
+      title: "Copy to Clipboard"
   end
 
   def http_clone_button(project, placement = 'right', append_link: true)
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 929496f81d8..c8c7b858baa 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -25,7 +25,7 @@
         .commit-actions.hidden-xs
           - if commit.status
             = render_commit_status(commit, cssclass: 'btn btn-transparent')
-          = clipboard_button_with_class({ clipboard_text: commit.id }, css_class: 'btn-transparent')
+          = clipboard_button(clipboard_text: commit.id)
           = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
           = link_to_browse_code(project, commit)
 
diff --git a/app/views/projects/merge_requests/show/_how_to_merge.html.haml b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
index b3bea900d42..b727efaa6a6 100644
--- a/app/views/projects/merge_requests/show/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
@@ -8,7 +8,7 @@
         %p
           %strong Step 1.
           Fetch and check out the branch for this merge request
-        = clipboard_button_with_class({clipboard_target: "pre#merge-info-1"}, css_class: "btn-clipboard")
+        = clipboard_button(clipboard_target: "pre#merge-info-1")
         %pre.dark#merge-info-1
           - if @merge_request.for_fork?
             :preserve
@@ -25,7 +25,7 @@
         %p
           %strong Step 3.
           Merge the branch and fix any conflicts that come up
-        = clipboard_button_with_class({clipboard_target: "pre#merge-info-3"}, css_class: "btn-clipboard")
+        = clipboard_button(clipboard_target: "pre#merge-info-3")
         %pre.dark#merge-info-3
           - if @merge_request.for_fork?
             :preserve
@@ -38,7 +38,7 @@
         %p
           %strong Step 4.
           Push the result of the merge to GitLab
-        = clipboard_button_with_class({clipboard_target: "pre#merge-info-4"}, css_class: "btn-clipboard")
+        = clipboard_button(clipboard_target: "pre#merge-info-4")
         %pre.dark#merge-info-4
           :preserve
             git push origin #{h @merge_request.target_branch}