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

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

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;
   }

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)

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)

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}