diff --git a/app/models/users/callout.rb b/app/models/users/callout.rb
index d042b27e70c372e49d2956e91c5d73a7e03c5ca2..5f9bf26d21900edf5aa8bd38a51c0a8b9225266c 100644
--- a/app/models/users/callout.rb
+++ b/app/models/users/callout.rb
@@ -116,7 +116,8 @@ class Callout < ApplicationRecord
       personal_homepage_preferences_banner: 112,
       duo_agent_platform_requested: 113, # EE-only
       email_otp_enrollment_callout: 114,
-      merge_request_dashboard_show_drafts: 115
+      merge_request_dashboard_show_drafts: 115,
+      focused_vulnerability_reporting: 116
     }
 
     validates :feature_name,
diff --git a/doc/api/graphql/reference/_index.md b/doc/api/graphql/reference/_index.md
index 5577fa57ae3c2b211f27bc0074522c1846904b2b..74f96a69830d8ff4dabeee09a7d72dbfe66ec767 100644
--- a/doc/api/graphql/reference/_index.md
+++ b/doc/api/graphql/reference/_index.md
@@ -51456,6 +51456,7 @@ Name of the feature that the callout is for.
 | <a id="usercalloutfeaturenameenumemail_otp_enrollment_callout"></a>`EMAIL_OTP_ENROLLMENT_CALLOUT` | Callout feature name for email_otp_enrollment_callout. |
 | <a id="usercalloutfeaturenameenumexplore_duo_core_banner"></a>`EXPLORE_DUO_CORE_BANNER` | Callout feature name for explore_duo_core_banner. |
 | <a id="usercalloutfeaturenameenumfeature_flags_new_version"></a>`FEATURE_FLAGS_NEW_VERSION` | Callout feature name for feature_flags_new_version. |
+| <a id="usercalloutfeaturenameenumfocused_vulnerability_reporting"></a>`FOCUSED_VULNERABILITY_REPORTING` | Callout feature name for focused_vulnerability_reporting. |
 | <a id="usercalloutfeaturenameenumgcp_signup_offer"></a>`GCP_SIGNUP_OFFER` | Callout feature name for gcp_signup_offer. |
 | <a id="usercalloutfeaturenameenumgeo_enable_hashed_storage"></a>`GEO_ENABLE_HASHED_STORAGE` | Callout feature name for geo_enable_hashed_storage. |
 | <a id="usercalloutfeaturenameenumgeo_migrate_hashed_storage"></a>`GEO_MIGRATE_HASHED_STORAGE` | Callout feature name for geo_migrate_hashed_storage. |
diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index cade22c41b5347bf71e4912359679af18e4b06be..940a59f5bd087b2f79a8c66847c8a3a8a61f1000 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -18,6 +18,7 @@ import DependencyLocationCount from './dependency_location_count.vue';
 import DependencyProjectCount from './dependency_project_count.vue';
 import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
 import DependencyPathDrawer from './dependency_path_drawer.vue';
+import VulnerabilitiesPopover from './vulnerabilities_popover.vue';
 
 const tdClass =
   (defaultClasses = []) =>
@@ -55,6 +56,7 @@ export default {
     DependencyLocationCount,
     DependencyProjectCount,
     DependencyPathDrawer,
+    VulnerabilitiesPopover,
     GlBadge,
     GlIcon,
     GlButton,
@@ -215,16 +217,7 @@ export default {
 
       <template #head(isVulnerable)="data">
         {{ data.label }}
-        <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
-        <gl-popover
-          placement="bottom"
-          boundary="viewport"
-          target="vulnerabilities-info"
-          data-testid="vulnerability-info-popover"
-          :title="$options.i18n.vulnerabilityInfoTitle"
-        >
-          <p class="gl-mb-0">{{ $options.i18n.vulnerabilityInfoBody }}</p>
-        </gl-popover>
+        <vulnerabilities-popover />
       </template>
 
       <!-- toggleDetails and detailsShowing are scoped slot props provided by
diff --git a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a441695944633c0a59474726f22149fe462158c9
--- /dev/null
+++ b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlIcon, GlPopover } from '@gitlab/ui';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+
+export default {
+  name: 'VulnerabilitiesPopover',
+  components: {
+    UserCalloutDismisser,
+    GlIcon,
+    GlPopover,
+  },
+};
+</script>
+
+<template>
+  <user-callout-dismisser ref="calloutDismisser" feature-name="focused_vulnerability_reporting">
+    <template #default="{ dismiss, shouldShowCallout }">
+      <div>
+        <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
+        <gl-popover
+          :show="shouldShowCallout"
+          :title="s__('Dependencies|Focused vulnerability reporting')"
+          placement="bottom"
+          boundary="viewport"
+          target="vulnerabilities-info"
+          triggers="manual"
+          show-close-button
+          data-testid="vulnerability-info-popover"
+          @close-button-clicked="dismiss"
+        >
+          <p class="gl-mb-0">
+            {{
+              s__(
+                'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
+              )
+            }}
+          </p>
+        </gl-popover>
+      </div>
+    </template>
+  </user-callout-dismisser>
+</template>
diff --git a/ee/app/assets/javascripts/dependencies/constants.js b/ee/app/assets/javascripts/dependencies/constants.js
index 0f1c6b2f6486f1e8880484a0fce02acd50782628..2dd9f07d56311c47eb2bd52fb1a22620b20eeec3 100644
--- a/ee/app/assets/javascripts/dependencies/constants.js
+++ b/ee/app/assets/javascripts/dependencies/constants.js
@@ -23,8 +23,4 @@ export const DEPENDENCIES_TABLE_I18N = {
   locationDependencyTitle: s__('Dependencies|List of direct dependents'),
   toggleVulnerabilityList: s__('Dependencies|Toggle vulnerability list'),
   dependencyPathButtonText: s__('Dependencies|View dependency paths'),
-  vulnerabilityInfoTitle: s__('Dependencies|Focused vulnerability reporting'),
-  vulnerabilityInfoBody: s__(
-    'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
-  ),
 };
diff --git a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
index c2dc65137af0909409d7776caaf3e6c1f5208b46..1cde31881f1babba639469579e0dbf4e1480eacb 100644
--- a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
+++ b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
@@ -7,6 +7,7 @@ import DependencyVulnerabilities from 'ee/dependencies/components/dependency_vul
 import DependencyLocationCount from 'ee/dependencies/components/dependency_location_count.vue';
 import DependencyProjectCount from 'ee/dependencies/components/dependency_project_count.vue';
 import DependencyLocation from 'ee/dependencies/components/dependency_location.vue';
+import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
 import { DEPENDENCIES_TABLE_I18N } from 'ee/dependencies/constants';
 import stubChildren from 'helpers/stub_children';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -52,8 +53,7 @@ describe('DependenciesTable component', () => {
   const findDependencyPathDrawer = () => wrapper.findComponent(DependencyPathDrawer);
   const findDependencyLicenseLinks = (licenseCell) =>
     licenseCell.findComponent(DependencyLicenseLinks);
-  const findVulnerabilityInfoIcon = () => wrapper.find('#vulnerabilities-info');
-  const findVulnerabilityInfoPopover = () => wrapper.findByTestId('vulnerability-info-popover');
+  const findVulnerabilityPopover = () => wrapper.findComponent(VulnerabilitiesPopover);
   const normalizeWhitespace = (string) => string.replace(/\s+/g, ' ');
   const loadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const sharedExpectations = (rowWrapper, dependency) => {
@@ -176,15 +176,8 @@ describe('DependenciesTable component', () => {
         });
       });
 
-      it('renders vulnerability info icon and popover', () => {
-        expect(findVulnerabilityInfoIcon().exists()).toBe(true);
-        expect(findVulnerabilityInfoPopover().exists()).toBe(true);
-        expect(findVulnerabilityInfoPopover().props('title')).toBe(
-          DEPENDENCIES_TABLE_I18N.vulnerabilityInfoTitle,
-        );
-        expect(findVulnerabilityInfoPopover().text()).toBe(
-          DEPENDENCIES_TABLE_I18N.vulnerabilityInfoBody,
-        );
+      it('renders vulnerability popover', () => {
+        expect(findVulnerabilityPopover().exists()).toBe(true);
       });
 
       it('renders a message that there are no records to show', () => {
diff --git a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..847b8528994da2f03ca256977424b1932b2012ad
--- /dev/null
+++ b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
@@ -0,0 +1,58 @@
+import { nextTick } from 'vue';
+import { GlIcon } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+
+describe('VulnerabilitiesPopover component', () => {
+  let wrapper;
+  let userCalloutDismissSpy;
+
+  const createWrapper = ({ shouldShowCallout = true } = {}) => {
+    userCalloutDismissSpy = jest.fn();
+
+    wrapper = shallowMountExtended(VulnerabilitiesPopover, {
+      stubs: {
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
+    });
+  };
+
+  const findVulnerabilityInfoIcon = () => wrapper.findComponent(GlIcon);
+  const findVulnerabilityInfoPopover = () => wrapper.findByTestId('vulnerability-info-popover');
+
+  beforeEach(createWrapper);
+
+  it('renders vulnerability info icon and popover', () => {
+    expect(findVulnerabilityInfoIcon().exists()).toBe(true);
+    expect(findVulnerabilityInfoPopover().exists()).toBe(true);
+    expect(findVulnerabilityInfoPopover().props()).toMatchObject({
+      title: 'Focused vulnerability reporting',
+      show: true,
+    });
+    expect(findVulnerabilityInfoPopover().text()).toBe(
+      'The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
+    );
+  });
+
+  describe('when popover has been dismissed', () => {
+    beforeEach(() => {
+      createWrapper({ shouldShowCallout: false });
+    });
+
+    it('does not show popover', () => {
+      expect(findVulnerabilityInfoPopover().props('show')).toBe(false);
+    });
+  });
+
+  describe('when popover is dismissed', () => {
+    it('handles closing the feature pop-up', async () => {
+      findVulnerabilityInfoPopover().vm.$emit('close-button-clicked');
+      await nextTick();
+      expect(userCalloutDismissSpy).toHaveBeenCalled();
+    });
+  });
+});