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.

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
+          <span v-gl-tooltip.hover :title="s__('MergeRequests|Toggle comments for this file')">
+            <gl-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>
+            </gl-button>
+          </span>
 
           <edit-button
             v-if="!diffFile.deleted_file"

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"

changelogs/unreleased/61821-tooltip-consistency.yml

+---
+title: Resolve Tooltip Consistency
+merge_request: 28839
+author:
+type: fixed