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.
This commit is contained in:
Justin Boyson 2019-06-01 02:12:45 +00:00 committed by Mike Greiling
parent 15916ad559
commit 3c6dc87ea8
3 changed files with 17 additions and 11 deletions

View file

@ -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"

View file

@ -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"

View file

@ -0,0 +1,5 @@
---
title: Resolve Tooltip Consistency
merge_request: 28839
author:
type: fixed