Replace tooltip directive with gl-tooltip directive in badges, cycle analytics, and diffs

app/assets/javascripts/badges/components/badge.vue

@@ -1,17 +1,16 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'Badge',
   components: {
     Icon,
-    Tooltip,
     GlLoadingIcon,
   },
   directives: {
-    Tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     imageUrl: {
@@ -93,7 +92,7 @@ export default {
 
     <button
       v-show="hasError"
-      v-tooltip
+      v-gl-tooltip
       :title="s__('Badges|Reload badge image')"
       class="btn btn-transparent btn-sm text-primary"
       type="button"

app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue

@@ -1,9 +1,9 @@
 <script>
-import tooltip from '../../vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     count: {
@@ -16,13 +16,12 @@ export default {
 <template>
   <span v-if="count === 50" class="events-info float-right">
     <i
-      v-tooltip
+      v-gl-tooltip.top
       :title="
         n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)
       "
       class="fa fa-warning"
       aria-hidden="true"
-      data-placement="top"
     >
     </i>
     {{ n__('Showing %d event', 'Showing %d events', 50) }}

app/assets/javascripts/diffs/components/commit_item.vue

@@ -1,5 +1,4 @@
 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -21,9 +20,6 @@ import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_sta
  *
  */
 export default {
-  directives: {
-    tooltip,
-  },
   components: {
     UserAvatarLink,
     Icon,

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import Tooltip from '@gitlab/ui/dist/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import { __ } from '~/locale';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -12,7 +12,7 @@ export default {
     Icon,
   },
   directives: {
-    Tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     mergeRequestDiffs: {
@@ -75,7 +75,7 @@ export default {
   <div class="mr-version-controls">
     <div class="mr-version-menus-container content-block">
       <button
-        v-tooltip.hover
+        v-gl-tooltip.hover
         type="button"
         class="btn btn-default append-right-8 js-toggle-tree-list"
         :class="{

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -4,7 +4,7 @@ import { mapActions, mapGetters } from 'vuex';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import Tooltip from '~/vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
 import EditButton from './edit_button.vue';
@@ -17,7 +17,7 @@ export default {
     FileIcon,
   },
   directives: {
-    Tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     discussionPath: {
@@ -161,23 +161,22 @@ export default {
         />
         <span v-if="diffFile.renamed_file">
           <strong
-            v-tooltip
+            v-gl-tooltip
             :title="diffFile.old_path"
             class="file-title-name"
-            data-container="body"
             v-html="diffFile.old_path_html"
           ></strong>
           →
           <strong
-            v-tooltip
+            v-gl-tooltip
             :title="diffFile.new_path"
             class="file-title-name"
-            data-container="body"
+
             v-html="diffFile.new_path_html"
           ></strong>
         </span>
 
-        <strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body">
+        <strong v-else v-gl-tooltip :title="filePath" class="file-title-name" data-container="body">
           {{ filePath }}
         </strong>
       </a>
@@ -233,7 +232,7 @@ export default {
 
       <a
         v-if="diffFile.external_url"
-        v-tooltip
+        v-gl-tooltip
         :href="diffFile.external_url"
         :title="`View on ${diffFile.formatted_external_url}`"
         target="_blank"

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -1,5 +1,5 @@
 <script>
-import tooltip from '../directives/tooltip';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import timeagoMixin from '../mixins/timeago';
 import '../../lib/utils/datetime_utility';
 
@@ -9,7 +9,7 @@ import '../../lib/utils/datetime_utility';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
   props: {
@@ -34,11 +34,10 @@ export default {
 </script>
 <template>
   <time
-    v-tooltip
+    v-gl-tooltip="{ placement: tooltipPlacement }"
     :class="cssClass"
     :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
-    data-container="body"
     v-text="timeFormated(time)"
   >
   </time>

changelogs/unreleased/gt-use-gl-tooltip-directive.yml

@@ -0,0 +1,5 @@
+---
+title: Replace tooltip directive with gl-tooltip diretive in badges, cycle analytics, and diffs
+merge_request: 22770
+author: George Tsiolis
+type: performance