Resolve "Improve tooltips of collapsed sidebars"

1 files changed, 27 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
index 8211d425b1f..de6f8c32e74 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
@@ -1,18 +1,29 @@
 <script>
-  export default {
-    name: 'ToggleSidebar',
-    props: {
-      collapsed: {
-        type: Boolean,
-        required: true,
-      },
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  name: 'ToggleSidebar',
+  directives: {
+    tooltip,
+  },
+  props: {
+    collapsed: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipLabel() {
+      return this.collapsed ? __('Expand sidebar') : __('Collapse sidebar');
     },
-    methods: {
-      toggle() {
-        this.$emit('toggle');
-      },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle');
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -20,6 +31,10 @@
     type="button"
     class="btn btn-blank gutter-toggle btn-sidebar-action"
     @click="toggle"
+    v-tooltip
+    data-container="body"
+    data-placement="left"
+    :title="tooltipLabel"
   >
     <i
       aria-label="toggle collapse"