diff options
3 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue index ff114e47741..aa5fce59dbf 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/button.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue @@ -1,7 +1,11 @@ <script> import Icon from '~/vue_shared/components/icon.vue'; +import tooltip from '~/vue_shared/directives/tooltip'; export default { + directives: { + tooltip, + }, components: { Icon, }, @@ -26,6 +30,11 @@ export default { default: true, }, }, + computed: { + tooltipTitle() { + return this.showLabel ? '' : this.label; + }, + }, methods: { clicked() { this.$emit('click'); @@ -36,7 +45,9 @@ export default { <template> <button + v-tooltip :aria-label="label" + :title="tooltipTitle" type="button" class="btn-blank" @click.stop.prevent="clicked" diff --git a/changelogs/unreleased/ide-header-buttons-tooltip.yml b/changelogs/unreleased/ide-header-buttons-tooltip.yml new file mode 100644 index 00000000000..4c8f6fd554f --- /dev/null +++ b/changelogs/unreleased/ide-header-buttons-tooltip.yml @@ -0,0 +1,5 @@ +--- +title: Added tooltips to tree list header +merge_request: 21138 +author: +type: added diff --git a/spec/javascripts/ide/components/new_dropdown/button_spec.js b/spec/javascripts/ide/components/new_dropdown/button_spec.js index ef083d06ba7..6a326b5bd92 100644 --- a/spec/javascripts/ide/components/new_dropdown/button_spec.js +++ b/spec/javascripts/ide/components/new_dropdown/button_spec.js @@ -46,4 +46,20 @@ describe('IDE new entry dropdown button component', () => { done(); }); }); + + describe('tooltipTitle', () => { + it('returns empty string when showLabel is true', () => { + expect(vm.tooltipTitle).toBe(''); + }); + + it('returns label', done => { + vm.showLabel = false; + + vm.$nextTick(() => { + expect(vm.tooltipTitle).toBe('Testing'); + + done(); + }); + }); + }); }); |