Use popover to show help text

ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue

 <script>
   import { s__ } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
+  import popover from '~/vue_shared/directives/popover';
   import Icon from '~/vue_shared/components/icon.vue';
-  import stackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
+  import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
 
   import { VALUE_TYPE, CUSTOM_TYPE } from '../constants';
 
-  import geoNodeSyncSettings from './geo_node_sync_settings.vue';
-  import geoNodeEventStatus from './geo_node_event_status.vue';
+  import GeoNodeSyncSettings from './geo_node_sync_settings.vue';
+  import GeoNodeEventStatus from './geo_node_event_status.vue';
 
   export default {
     components: {
       Icon,
-      stackedProgressBar,
-      geoNodeSyncSettings,
-      geoNodeEventStatus,
+      StackedProgressBar,
+      GeoNodeSyncSettings,
+      GeoNodeEventStatus,
     },
     directives: {
-      tooltip,
+      popover,
     },
     props: {
       itemTitle: {
@@ -62,15 +62,15 @@
         required: false,
         default: false,
       },
-      helpText: {
-        type: String,
+      helpInfo: {
+        type: [Boolean, Object],
         required: false,
-        default: '',
+        default: false,
       },
     },
     computed: {
-      hasHelpText() {
-        return this.helpText !== '';
+      hasHelpInfo() {
+        return typeof this.helpInfo === 'object';
       },
       isValueTypePlain() {
         return this.itemValueType === VALUE_TYPE.PLAIN;
@@ -84,6 +84,26 @@
       isCustomTypeSync() {
         return this.customType === CUSTOM_TYPE.SYNC;
       },
+      popoverConfig() {
+        return {
+          html: true,
+          trigger: 'click',
+          placement: 'top',
+          template: `
+            <div class="popover geo-node-detail-popover" role="tooltip">
+              <div class="arrow"></div>
+              <p class="popover-title"></p>
+              <div class="popover-content"></div>
+            </div>
+          `,
+          title: this.helpInfo.title,
+          content: `
+            <a href="${this.helpInfo.url}">
+              ${this.helpInfo.urlText}
+            </a>
+          `,
+        };
+      },
     },
   };
 </script>
@@ -95,12 +115,11 @@
         {{ itemTitle }}
       </span>
       <icon
-        v-tooltip
-        v-if="hasHelpText"
+        v-popover="popoverConfig"
+        v-if="hasHelpInfo"
         css-classes="node-detail-help-text prepend-left-5"
         name="question"
         :size="12"
-        :title="helpText"
       />
     </div>
     <div

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification.vue

@@ -2,7 +2,7 @@
   import { s__ } from '~/locale';
   import { numberToHumanSize } from '~/lib/utils/number_utils';
 
-  import { VALUE_TYPE } from '../../constants';
+  import { VALUE_TYPE, HELP_INFO_URLS } from '../../constants';
 
   import GeoNodeDetailItem from '../geo_node_detail_item.vue';
   import SectionRevealButton from './section_reveal_button.vue';
@@ -55,7 +55,11 @@
               successLabel: s__('GeoNodes|Checksummed'),
               neutraLabel: s__('GeoNodes|Not checksummed'),
               failureLabel: s__('GeoNodes|Failed'),
-              helpText: s__('GeoNodes|Repositories checksummed for verification with their counterparts on Secondary nodes'),
+              helpInfo: {
+                title: s__('GeoNodes|Repositories checksummed for verification with their counterparts on Secondary nodes'),
+                url: HELP_INFO_URLS.REPOSITORY_VERIFICATION,
+                urlText: s__('GeoNodes|Learn more about Repository checksum progress'),
+              },
             },
             {
               itemTitle: s__('GeoNodes|Wiki checksum progress'),
@@ -64,7 +68,11 @@
               successLabel: s__('GeoNodes|Checksummed'),
               neutraLabel: s__('GeoNodes|Not checksummed'),
               failureLabel: s__('GeoNodes|Failed'),
-              helpText: s__('GeoNodes|Wikis checksummed for verification with their counterparts on Secondary nodes'),
+              helpInfo: {
+                title: s__('GeoNodes|Wikis checksummed for verification with their counterparts on Secondary nodes'),
+                url: HELP_INFO_URLS.REPOSITORY_VERIFICATION,
+                urlText: s__('GeoNodes|Learn more about Wiki checksum progress'),
+              },
             },
           );
         }
@@ -101,7 +109,11 @@
             successLabel: s__('GeoNodes|Verified'),
             neutraLabel: s__('GeoNodes|Unverified'),
             failureLabel: s__('GeoNodes|Failed'),
-            helpText: s__('GeoNodes|Repositories verified with their counterparts on the Primary node'),
+            helpInfo: {
+              title: s__('GeoNodes|Repositories verified with their counterparts on the Primary node'),
+              url: HELP_INFO_URLS.REPOSITORY_VERIFICATION,
+              urlText: s__('GeoNodes|Learn more about Repository checksum progress'),
+            },
           },
           {
             itemTitle: s__('GeoNodes|Wiki verification progress'),
@@ -110,7 +122,11 @@
             successLabel: s__('GeoNodes|Verified'),
             neutraLabel: s__('GeoNodes|Unverified'),
             failureLabel: s__('GeoNodes|Failed'),
-            helpText: s__('GeoNodes|Wikis verified with their counterparts on the Primary node'),
+            helpInfo: {
+              title: s__('GeoNodes|Wikis verified with their counterparts on the Primary node'),
+              url: HELP_INFO_URLS.CHECKSUMS,
+              urlText: s__('GeoNodes|Learn more about Wiki checksum progress'),
+            },
           },
         ];
 
@@ -149,7 +165,7 @@
           :neutral-label="nodeDetailItem.neutraLabel"
           :failure-label="nodeDetailItem.failureLabel"
           :custom-type="nodeDetailItem.customType"
-          :help-text="nodeDetailItem.helpText"
+          :help-info="nodeDetailItem.helpInfo"
         />
       </div>
     </template>

ee/app/assets/javascripts/geo_nodes/constants.js

@@ -27,3 +27,5 @@ export const TIME_DIFF = {
   FIVE_MINS: 300,
   HOUR: 3600,
 };
+
+export const HELP_INFO_URLS = { REPOSITORY_VERIFICATION: 'https://docs.gitlab.com/ee/administration/geo/disaster_recovery/background_verification.html#repository-verification', CHECKSUMS: 'https://docs.gitlab.com/ee/administration/geo/disaster_recovery/background_verification.html#using-checksums-to-compare-geo-nodes' };

spec/javascripts/geo_nodes/components/geo_node_detail_item_spec.js

@@ -37,13 +37,13 @@ describe('GeoNodeDetailItemComponent', () => {
       vm.$destroy();
     });
 
-    it('renders item title help text icon and tooltip', () => {
-      const helpText = 'Foo title tooltip';
-      const vm = createComponent({ helpText });
-      const helpTextEl = vm.$el.querySelector('.node-detail-help-text');
+    it('renders item title help info icon and popover with help info', () => {
+      const helpInfo = { title: 'Foo title tooltip', url: 'https://docs.gitlab.com', urlText: 'Help' };
+      const vm = createComponent({ helpInfo });
+      const helpTextIconEl = vm.$el.querySelector('.node-detail-help-text');
 
-      expect(helpTextEl).not.toBeNull();
-      expect(helpTextEl.dataset.originalTitle).toBe(helpText);
+      expect(helpTextIconEl).not.toBeNull();
+      expect(helpTextIconEl.querySelector('use').getAttribute('xlink:href')).toContain('question');
       vm.$destroy();
     });