Fix disabled blob button tooltip

Wrap disabled copy to clipboard button
tooltip by wrapping the button in a
container that attaches to the tooltip

app/assets/javascripts/blob/viewer/index.js

@@ -62,6 +62,7 @@ export default class BlobViewer {
     this.switcher = document.querySelector('.js-blob-viewer-switcher');
     this.switcherBtns = document.querySelectorAll('.js-blob-viewer-switch-btn');
     this.copySourceBtn = document.querySelector('.js-copy-blob-source-btn');
+    this.copySourceBtnTooltip = document.querySelector('.js-copy-blob-source-btn-tooltip');
 
     this.simpleViewer = this.$fileHolder[0].querySelector('.blob-viewer[data-type="simple"]');
     this.richViewer = this.$fileHolder[0].querySelector('.blob-viewer[data-type="rich"]');
@@ -109,23 +110,23 @@ export default class BlobViewer {
   toggleCopyButtonState() {
     if (!this.copySourceBtn) return;
     if (this.simpleViewer.getAttribute('data-loaded')) {
-      this.copySourceBtn.setAttribute('title', __('Copy file contents'));
+      this.copySourceBtnTooltip.setAttribute('title', __('Copy file contents'));
       this.copySourceBtn.classList.remove('disabled');
     } else if (this.activeViewer === this.simpleViewer) {
-      this.copySourceBtn.setAttribute(
+      this.copySourceBtnTooltip.setAttribute(
         'title',
         __('Wait for the file to load to copy its contents'),
       );
       this.copySourceBtn.classList.add('disabled');
     } else {
-      this.copySourceBtn.setAttribute(
+      this.copySourceBtnTooltip.setAttribute(
         'title',
         __('Switch to the source to copy the file contents'),
       );
       this.copySourceBtn.classList.add('disabled');
     }
 
-    fixTitle($(this.copySourceBtn));
+    fixTitle($(this.copySourceBtnTooltip));
   }
 
   switchToViewer(name) {

app/helpers/blob_helper.rb

@@ -235,7 +235,9 @@ module BlobHelper
   def copy_blob_source_button(blob)
     return unless blob.rendered_as_text?(ignore_errors: false)
 
-    clipboard_button(target: ".blob-content[data-blob-id='#{blob.id}'] > pre", class: "btn gl-button btn-default btn-icon js-copy-blob-source-btn", title: _("Copy file contents"))
+    content_tag(:span, class: 'btn-group has-tooltip js-copy-blob-source-btn-tooltip') do
+      clipboard_button(target: ".blob-content[data-blob-id='#{blob.id}'] > pre", class: "btn gl-button btn-default btn-icon js-copy-blob-source-btn", hide_tooltip: true)
+    end
   end
 
   def open_raw_blob_button(blob)

app/views/projects/diffs/_file.html.haml

@@ -16,8 +16,9 @@
     - unless diff_file.submodule?
       .file-actions.d-none.d-sm-block
         - if diff_file.blob&.readable_text?
-          = link_to '#', class: 'js-toggle-diff-comments btn gl-button active has-tooltip', title: _("Toggle comments for this file"), disabled: @diff_notes_disabled do
-            = sprite_icon('comment')
+          %span.has-tooltip{ title: _("Toggle comments for this file") }
+            = link_to '#', class: 'js-toggle-diff-comments btn gl-button active', disabled: @diff_notes_disabled do
+              = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
             - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}

spec/frontend/blob/viewer/index_spec.js

@@ -85,9 +85,11 @@ describe('Blob viewer', () => {
 
   describe('copy blob button', () => {
     let copyButton;
+    let copyButtonTooltip;
 
     beforeEach(() => {
       copyButton = document.querySelector('.js-copy-blob-source-btn');
+      copyButtonTooltip = document.querySelector('.js-copy-blob-source-btn-tooltip');
     });
 
     it('disabled on load', () => {
@@ -95,7 +97,7 @@ describe('Blob viewer', () => {
     });
 
     it('has tooltip when disabled', () => {
-      expect(copyButton.getAttribute('title')).toBe(
+      expect(copyButtonTooltip.getAttribute('title')).toBe(
         'Switch to the source to copy the file contents',
       );
     });
@@ -131,7 +133,7 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setImmediate(() => {
-        expect(copyButton.getAttribute('title')).toBe('Copy file contents');
+        expect(copyButtonTooltip.getAttribute('title')).toBe('Copy file contents');
 
         done();
       });