Improves popover to show on focus

CSS improvements after review

1 files changed, 12 insertions, 13 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index b4a7fbec5f9..db10abdae83 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -25,11 +25,15 @@
       user() {
         return this.pipeline.user;
       },
-      autoDevOpsTitle() {
-        return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
-      },
-      autoDevOpsContent() {
-        return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`;
+      popoverOptions() {
+        return {
+          html: true,
+          delay: { hide: 600 },
+          trigger: 'hover',
+          placement: 'top',
+          title: '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>',
+          content: `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`,
+        };
       },
     },
   };
@@ -71,14 +75,9 @@
       </span>
       <a
         v-if="pipeline.flags.auto_devops"
-        class="js-pipeline-url-autodevops label label-info"
-        v-popover:html
-        tabindex="0"
-        role="button"
-        data-trigger="focus"
-        data-placement="top"
-        :title="autoDevOpsTitle"
-        :data-content="autoDevOpsContent">
+        class="js-pipeline-url-autodevops label label-info autodevops-link"
+        v-popover="popoverOptions"
+        role="button">
         Auto DevOps
       </a>
       <span