Commit 3c6dc87e authored by Justin Boyson's avatar Justin Boyson Committed by Mike Greiling

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.
parent 15916ad5
......@@ -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"
......
......@@ -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"
......
---
title: Resolve Tooltip Consistency
merge_request: 28839
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment