diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index 7446196de13..1e8a892c0b8 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -1,7 +1,7 @@
 <script>
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
-import { s__ } from '../../locale';
+import { s__ } from '~/locale';
 
 /**
  * Renders the external url link in environments table.
@@ -11,7 +11,7 @@ export default {
     Icon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     externalUrl: {
@@ -28,12 +28,11 @@ export default {
 </script>
 <template>
   <a
-    v-tooltip
+    v-gl-tooltip
     :title="title"
     :aria-label="title"
     :href="externalUrl"
     class="btn external-url"
-    data-container="body"
     target="_blank"
     rel="noopener noreferrer nofollow"
   >
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 41f59447905..50b0e9747ee 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,7 +1,7 @@
 <script>
 import Timeago from 'timeago.js';
 import _ from 'underscore';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { humanize } from '~/lib/utils/text_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -36,7 +36,7 @@ export default {
   },
 
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
 
   props: {
@@ -455,7 +455,7 @@ export default {
     class="gl-responsive-table-row"
     role="row">
     <div
-      v-tooltip
+      v-gl-tooltip
       :title="model.name"
       class="table-section section-wrap section-15 text-truncate"
       role="gridcell"
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 26bec125445..7c723fa8979 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -2,9 +2,8 @@
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
-import { GlButton } from '@gitlab-org/gitlab-ui';
+import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   components: {
@@ -12,7 +11,7 @@ export default {
     GlButton,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     monitoringUrl: {
@@ -29,12 +28,11 @@ export default {
 </script>
 <template>
   <gl-button
-    v-tooltip
+    v-gl-tooltip
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
     class="monitoring-url d-none d-sm-none d-md-block"
-    data-container="body"
     rel="noopener noreferrer nofollow"
     variant="default"
   >
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 69856abc2d5..298469e6482 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -6,21 +6,18 @@
  * Makes a post request when the button is clicked.
  */
 import { s__ } from '~/locale';
+import { GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '../event_hub';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
     Icon,
     GlLoadingIcon,
   },
-
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   props: {
     retryUrl: {
       type: String,
@@ -57,21 +54,21 @@ export default {
 </script>
 <template>
   <button
-    v-tooltip
+    v-gl-tooltip
     :disabled="isLoading"
     :title="title"
     type="button"
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
   >
-
     <icon
       v-if="isLastDeployment"
-      name="repeat" />
+      name="repeat" 
+    />
     <icon
       v-else
-      name="redo"/>
-
+      name="redo"
+    />
     <gl-loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index a814b3405f5..327c96a93e9 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -5,49 +5,42 @@
  */
 
 import $ from 'jquery';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
     LoadingButton,
   },
-
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   props: {
     environment: {
       type: Object,
       required: true,
     },
   },
-
   data() {
     return {
       isLoading: false,
     };
   },
-
   computed: {
     title() {
       return s__('Environments|Stop environment');
     },
   },
-
   mounted() {
     eventHub.$on('stopEnvironment', this.onStopEnvironment);
   },
-
   beforeDestroy() {
     eventHub.$off('stopEnvironment', this.onStopEnvironment);
   },
-
   methods: {
     onClick() {
       $(this.$el).tooltip('dispose');
@@ -63,12 +56,11 @@ export default {
 </script>
 <template>
   <loading-button
-    v-tooltip
+    v-gl-tooltip
     :loading="isLoading"
     :title="title"
     :aria-label="title"
     container-class="btn btn-danger d-none d-sm-none d-md-block"
-    data-container="body"
     data-toggle="modal"
     data-target="#stop-environment-modal"
     @click="onClick"
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 350417e5ad0..b8b909f350c 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,15 +3,15 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     terminalPath: {
@@ -29,12 +29,11 @@ export default {
 </script>
 <template>
   <a
-    v-tooltip
+    v-gl-tooltip
     :title="title"
     :aria-label="title"
     :href="terminalPath"
     class="btn terminal-button d-none d-sm-none d-md-block"
-    data-container="body"
   >
     <icon name="terminal" />
   </a>
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 657cc8cd1aa..6397f6caf1b 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -1,7 +1,7 @@
 <script>
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { s__, sprintf } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
 
@@ -15,7 +15,7 @@ export default {
   },
 
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
 
   props: {
@@ -67,7 +67,7 @@ export default {
       >
         Stopping
         <span
-          v-tooltip
+          v-gl-tooltip
           :title="environment.name"
           class="text-truncate ml-1 mr-1 flex-fill"
         >{{ environment.name }}</span>
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index 8684005e0fb..766fc211bf5 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -1,5 +1,5 @@
 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { pluralize } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
@@ -10,7 +10,7 @@ export default {
     Icon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     file: {
@@ -79,10 +79,8 @@ export default {
 
 <template>
   <span
-    v-tooltip
+    v-gl-tooltip.right
     :title="tooltipTitle"
-    data-container="body"
-    data-placement="right"
     class="file-changed-icon ml-auto"
   >
     <icon
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index c60052fec50..6780254827f 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,6 +1,6 @@
 <script>
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import CiIcon from './ci_icon.vue';
-import tooltip from '../directives/tooltip';
 /**
  * Renders CI Badge link with CI icon and status text based on
  * API response shared between all places where it is used.
@@ -27,7 +27,7 @@ export default {
     CiIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     status: {
@@ -50,7 +50,7 @@ export default {
 </script>
 <template>
   <a
-    v-tooltip
+    v-gl-tooltip
     :href="status.details_path"
     :class="cssClass"
     :title="!showText ? status.text : ''"
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 151eee75d44..b1139f34e41 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -1,11 +1,11 @@
 <script>
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import UserAvatarLink from './user_avatar/user_avatar_link.vue';
-import tooltip from '../directives/tooltip';
 import Icon from '../../vue_shared/components/icon.vue';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     UserAvatarLink,
@@ -124,11 +124,10 @@ export default {
       </div>
 
       <a
-        v-tooltip
+        v-gl-tooltip
         :href="commitRef.ref_url"
         :title="commitRef.name"
         class="ref-name"
-        data-container="body"
       >
         {{ commitRef.name }}
       </a>
diff --git a/changelogs/unreleased/51259-ci-cd-tooltips.yml b/changelogs/unreleased/51259-ci-cd-tooltips.yml
new file mode 100644
index 00000000000..fc0010dbeba
--- /dev/null
+++ b/changelogs/unreleased/51259-ci-cd-tooltips.yml
@@ -0,0 +1,6 @@
+---
+title: Replaces tooltip directive with the new gl-tooltip directive for consistency
+  in some ci/cd code
+merge_request:
+author:
+type: other