diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index fc5b2b99c18b2460efff62353305d7c75f20c8d8..d5434c63d63a4134228c869342cba26b01236e36 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -46,6 +46,14 @@ export default {
     isApplying() {
       return this.isApplyingSingle || this.isApplyingBatch;
     },
+    tooltipMessage() {
+      return this.canApply
+        ? __('This also resolves the discussion')
+        : __("Can't apply as this line has changed or the suggestion already matches its content.");
+    },
+    isDisableButton() {
+      return this.isApplying || !this.canApply;
+    },
     applyingSuggestionsMessage() {
       if (this.isApplyingSingle || this.batchSuggestionsCount < 2) {
         return __('Applying suggestion...');
@@ -110,23 +118,24 @@ export default {
         </span>
       </gl-deprecated-button>
     </div>
-    <div v-else-if="canApply" class="d-flex align-items-center">
+    <div v-else class="d-flex align-items-center">
       <gl-deprecated-button
         class="btn-inverted js-add-to-batch-btn btn-grouped"
-        :disabled="isApplying"
+        :disabled="isDisableButton"
         @click="addSuggestionToBatch"
       >
         {{ __('Add suggestion to batch') }}
       </gl-deprecated-button>
-      <gl-deprecated-button
-        v-gl-tooltip.viewport="__('This also resolves the thread')"
-        class="btn-inverted js-apply-btn btn-grouped"
-        :disabled="isApplying"
-        variant="success"
-        @click="applySuggestion"
-      >
-        {{ __('Apply suggestion') }}
-      </gl-deprecated-button>
+      <span v-gl-tooltip.viewport="tooltipMessage" tabindex="0">
+        <gl-deprecated-button
+          class="btn-inverted js-apply-btn btn-grouped"
+          :disabled="isDisableButton"
+          variant="success"
+          @click="applySuggestion"
+        >
+          {{ __('Apply suggestion') }}
+        </gl-deprecated-button>
+      </span>
     </div>
   </div>
 </template>
diff --git a/changelogs/unreleased/30707-show-outdated-status-of-suggestions.yml b/changelogs/unreleased/30707-show-outdated-status-of-suggestions.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bec0d8d3c956cdd4562ddbbe39d376b2836b244a
--- /dev/null
+++ b/changelogs/unreleased/30707-show-outdated-status-of-suggestions.yml
@@ -0,0 +1,5 @@
+---
+title: Show disabled suggestion button with tooltip message
+merge_request: 33357
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6a19d69ca6cb1c695907f0c3566a75a870638e13..814a7eb5c96e50be0f7673989b01de4406962cf3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3799,6 +3799,9 @@ msgstr ""
 msgid "Can override approvers and approvals required per merge request"
 msgstr ""
 
+msgid "Can't apply as this line has changed or the suggestion already matches its content."
+msgstr ""
+
 msgid "Can't create snippet: %{err}"
 msgstr ""
 
@@ -22558,7 +22561,7 @@ msgstr ""
 msgid "This also resolves all related threads"
 msgstr ""
 
-msgid "This also resolves the thread"
+msgid "This also resolves the discussion"
 msgstr ""
 
 msgid "This application was created by %{link_to_owner}."
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
index 2a3db38c3eb943808cbd0a96ec8229bb16058c70..a31b923a71903aafd31d30bc2d7f2c041f485a30 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -63,11 +63,9 @@ describe('Suggestion Diff component', () => {
     expect(addToBatchBtn.html().includes('Add suggestion to batch')).toBe(true);
   });
 
-  it('does not render apply suggestion and add to batch buttons if `canApply` is set to false', () => {
-    createComponent({ canApply: false });
-
-    expect(findApplyButton().exists()).toBe(false);
-    expect(findAddToBatchButton().exists()).toBe(false);
+  it('renders correct tooltip message for apply button', () => {
+    createComponent();
+    expect(wrapper.vm.tooltipMessage).toBe('This also resolves the discussion');
   });
 
   describe('when apply suggestion is clicked', () => {
@@ -84,7 +82,7 @@ describe('Suggestion Diff component', () => {
       });
     });
 
-    it('hides  apply suggestion and add to batch buttons', () => {
+    it('does not render apply suggestion and add to batch buttons', () => {
       expect(findApplyButton().exists()).toBe(false);
       expect(findAddToBatchButton().exists()).toBe(false);
     });
@@ -205,4 +203,23 @@ describe('Suggestion Diff component', () => {
       });
     });
   });
+
+  describe('canApply is set to false', () => {
+    beforeEach(() => {
+      createComponent({ canApply: false });
+    });
+
+    it('disables apply suggestion and add to batch buttons', () => {
+      expect(findApplyButton().exists()).toBe(true);
+      expect(findAddToBatchButton().exists()).toBe(true);
+      expect(findApplyButton().attributes('disabled')).toBe('true');
+      expect(findAddToBatchButton().attributes('disabled')).toBe('true');
+    });
+
+    it('renders correct tooltip message for apply button', () => {
+      expect(wrapper.vm.tooltipMessage).toBe(
+        "Can't apply as this line has changed or the suggestion already matches its content.",
+      );
+    });
+  });
 });