Attach tooltip to a wrapper in disabled buttons

Buttons that are disabled should not have
a tooltip attached because they cannot
receive pointer events

app/helpers/blob_helper.rb

@@ -106,11 +106,12 @@ module BlobHelper
     return unless blob
 
     common_classes = "btn btn-#{btn_class}"
+    base_button = button_tag(label, class: "#{common_classes} disabled", disabled: true)
 
     if !on_top_of_branch?(project, ref)
-      button_tag label, class: "#{common_classes} disabled has-tooltip", title: "You can only #{action} files when you are on a branch", data: { container: 'body' }
+      modify_file_button_tooltip(base_button, _("You can only %{action} files when you are on a branch") % { action: action })
     elsif blob.stored_externally?
-      button_tag label, class: "#{common_classes} disabled has-tooltip", title: "It is not possible to #{action} files that are stored in LFS using the web interface", data: { container: 'body' }
+      modify_file_button_tooltip(base_button, _("It is not possible to %{action} files that are stored in LFS using the web interface") % { action: action })
     elsif can_modify_blob?(blob, project, ref)
       button_tag label, class: "#{common_classes}", 'data-target' => "#modal-#{modal_type}-blob", 'data-toggle' => 'modal'
     elsif can?(current_user, :fork_project, project) && can?(current_user, :create_merge_request_in, project)
@@ -364,7 +365,11 @@ module BlobHelper
   end
 
   def edit_disabled_button_tag(button_text, common_classes)
-    button_tag(button_text, class: "#{common_classes} disabled has-tooltip", title: _('You can only edit files when you are on a branch'), data: { container: 'body' })
+    button = button_tag(button_text, class: "#{common_classes} disabled", disabled: true)
+
+    # Disabled buttons with tooltips should have the tooltip attached
+    # to a wrapper element https://bootstrap-vue.org/docs/components/tooltip#disabled-elements
+    content_tag(:span, button, class: 'has-tooltip', title: _('You can only edit files when you are on a branch'), data: { container: 'body' })
   end
 
   def edit_link_tag(link_text, edit_path, common_classes, data)
@@ -401,4 +406,12 @@ module BlobHelper
     @path.to_s.end_with?(Ci::Pipeline::CONFIG_EXTENSION) ||
       @path.to_s == @project.ci_config_path_or_default
   end
+
+  private
+
+  def modify_file_button_tooltip(button, tooltip_message)
+    # Disabled buttons with tooltips should have the tooltip attached
+    # to a wrapper element https://bootstrap-vue.org/docs/components/tooltip#disabled-elements
+    content_tag(:span, button, class: 'btn-group has-tooltip', title: tooltip_message, data: { container: 'body' })
+  end
 end

ee/app/helpers/ee/lock_helper.rb

@@ -53,12 +53,12 @@ module EE
     end
 
     def disabled_lock_link(label, title, html_options)
-      html_options['data-toggle'] = 'tooltip'
-      html_options[:title] = title
-      html_options[:class] = "#{html_options[:class]} disabled has-tooltip"
+      html_options[:class] = "#{html_options[:class]} disabled"
       html_options['data-qa-selector'] = 'disabled_lock_button'
 
-      content_tag :span, label, html_options
+      # Disabled buttons with tooltips should have the tooltip attached
+      # to a wrapper element https://bootstrap-vue.org/docs/components/tooltip#disabled-elements
+      content_tag(:span, content_tag(:span, label, html_options), title: title, class: 'btn-group has-tooltip')
     end
 
     def enabled_lock_link(label, title, html_options)

locale/gitlab.pot

@@ -15941,6 +15941,9 @@ msgstr ""
 msgid "Issue|Title"
 msgstr ""
 
+msgid "It is not possible to %{action} files that are stored in LFS using the web interface"
+msgstr ""
+
 msgid "It looks like you have some draft commits in this branch."
 msgstr ""
 
@@ -32366,6 +32369,9 @@ msgstr ""
 msgid "You can now submit a merge request to get this change into the original project."
 msgstr ""
 
+msgid "You can only %{action} files when you are on a branch"
+msgstr ""
+
 msgid "You can only edit files when you are on a branch"
 msgstr ""
 

spec/helpers/blob_helper_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe BlobHelper do
     end
   end
 
-  describe "#edit_blob_link" do
+  describe "#edit_blob_button" do
     let(:namespace) { create(:namespace, name: 'gitlab') }
     let(:project) { create(:project, :repository, namespace: namespace) }
 
@@ -28,12 +28,13 @@ RSpec.describe BlobHelper do
       allow(helper).to receive(:can_collaborate_with_project?).and_return(true)
     end
 
-    it 'verifies blob is text' do
+    it 'does not render edit button when blob is not text' do
       expect(helper).not_to receive(:blob_text_viewable?)
 
-      button = helper.edit_blob_button(project, 'refs/heads/master', 'README.md')
+      # RADME.md is not a valid file.
+      button = helper.edit_blob_button(project, 'refs/heads/master', 'RADME.md')
 
-      expect(button).to start_with('<button')
+      expect(button).to eq(nil)
     end
 
     it 'uses the passed blob instead retrieve from repository' do