added tooltip to bar buttons

1 files changed, 23 insertions, 2 deletions

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index edea6a9b894..05dbc1410de 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -1,12 +1,16 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 import { activityBarViews } from '../constants';
 
 export default {
   components: {
     Icon,
   },
+  directives: {
+    tooltip,
+  },
   computed: {
     ...mapGetters(['currentProject', 'hasChanges']),
     ...mapState(['currentActivityView']),
@@ -26,8 +30,12 @@ export default {
     <ul class="list-unstyled">
       <li v-once>
         <a
+          v-tooltip
+          data-container="body"
+          data-placement="right"
           :href="goBackUrl"
           class="ide-sidebar-link"
+          :title="s__('IDE|Go back')"
           :aria-label="s__('IDE|Go back')"
         >
           <icon
@@ -38,13 +46,17 @@ export default {
       </li>
       <li>
         <button
+          v-tooltip
+          data-container="body"
+          data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-edit-mode"
           :class="{
             active: currentActivityView === $options.activityBarViews.edit
           }"
           @click.prevent="updateActivityBarView($options.activityBarViews.edit)"
-          :aria-label="s__('IDE|Edit mode')"
+          :title="s__('IDE|Edit')"
+          :aria-label="s__('IDE|Edit')"
         >
           <icon
             name="code"
@@ -53,12 +65,17 @@ export default {
       </li>
       <li>
         <button
+          v-tooltip
+          data-container="body"
+          data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
           :class="{
             active: currentActivityView === $options.activityBarViews.review
           }"
           @click.prevent="updateActivityBarView($options.activityBarViews.review)"
+          :title="s__('IDE|Review')"
+          :aria-label="s__('IDE|Review')"
         >
           <icon
             name="file-modified"
@@ -67,13 +84,17 @@ export default {
       </li>
       <li v-show="hasChanges">
         <button
+          v-tooltip
+          data-container="body"
+          data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-commit-mode"
           :class="{
             active: currentActivityView === $options.activityBarViews.commit
           }"
           @click.prevent="updateActivityBarView($options.activityBarViews.commit)"
-          :aria-label="s__('IDE|Commit mode')"
+          :title="s__('IDE|Commit')"
+          :aria-label="s__('IDE|Commit')"
         >
           <icon
             name="commit"