From 3c6dc87ea8d0a467642da2ac4fc0037ff220af89 Mon Sep 17 00:00:00 2001
From: Justin Boyson <jboyson@gitlab.com>
Date: Sat, 1 Jun 2019 02:12:45 +0000
Subject: Make tooltips consistently render on top

On edit-button simply set position to top.
Made this change directly in template since edit-button
is only used in one place.

Had to wrap the comments toggle button in span tag to make
tooltip show even when disabled as per bootstrap-vue docs.
https://bootstrap-vue.js.org/docs/components/tooltip#overview

Note: Also changexc button to gl-buttonto be consistent
with rest of file.
---
 .../diffs/components/diff_file_header.vue           | 21 +++++++++++----------
 .../javascripts/diffs/components/edit_button.vue    |  2 +-
 changelogs/unreleased/61821-tooltip-consistency.yml |  5 +++++
 3 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 changelogs/unreleased/61821-tooltip-consistency.yml

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index d26b58d461a..eb9f1465945 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -254,16 +254,17 @@ export default {
       <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
       <div class="btn-group" role="group">
         <template v-if="diffFile.blob && diffFile.blob.readable_text">
-          <button
-            :disabled="!diffHasDiscussions(diffFile)"
-            :class="{ active: hasExpandedDiscussions }"
-            :title="s__('MergeRequests|Toggle comments for this file')"
-            class="js-btn-vue-toggle-comments btn"
-            type="button"
-            @click="handleToggleDiscussions"
-          >
-            <icon name="comment" />
-          </button>
+          <span v-gl-tooltip.hover :title="s__('MergeRequests|Toggle comments for this file')">
+            <gl-button
+              :disabled="!diffHasDiscussions(diffFile)"
+              :class="{ active: hasExpandedDiscussions }"
+              class="js-btn-vue-toggle-comments btn"
+              type="button"
+              @click="handleToggleDiscussions"
+            >
+              <icon name="comment" />
+            </gl-button>
+          </span>
 
           <edit-button
             v-if="!diffFile.deleted_file"
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index f0cc5de4b33..dcb79cd5e16 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -38,7 +38,7 @@ export default {
 
 <template>
   <gl-button
-    v-gl-tooltip.bottom
+    v-gl-tooltip.top
     :href="editPath"
     :title="__('Edit file')"
     class="js-edit-blob"
diff --git a/changelogs/unreleased/61821-tooltip-consistency.yml b/changelogs/unreleased/61821-tooltip-consistency.yml
new file mode 100644
index 00000000000..9b131907ebf
--- /dev/null
+++ b/changelogs/unreleased/61821-tooltip-consistency.yml
@@ -0,0 +1,5 @@
+---
+title: Resolve Tooltip Consistency
+merge_request: 28839
+author:
+type: fixed
-- 
cgit v1.2.1