Commit a8dbf7c3 authored by Miguel Rincon's avatar Miguel Rincon Committed by Paul Slaughter

Adapt to size changes when displaying tooltips

This change updates the "tooltip-on-truncate" component to respond to
changes in the component size.

Previously the component was only detected as overflowing once and
didn't respond to changes in its size.

Changelog: changed
parent a385aa11
<script> <script>
import { GlTooltipDirective as GlTooltip } from '@gitlab/ui'; import { GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui';
import { isFunction } from 'lodash'; import { isFunction, debounce } from 'lodash';
import { hasHorizontalOverflow } from '~/lib/utils/dom_utils'; import { hasHorizontalOverflow } from '~/lib/utils/dom_utils';
const UPDATE_TOOLTIP_DEBOUNCED_WAIT_MS = 300;
export default { export default {
directives: { directives: {
GlTooltip, GlTooltip: GlTooltipDirective,
GlResizeObserver: GlResizeObserverDirective,
}, },
props: { props: {
title: { title: {
...@@ -26,15 +29,33 @@ export default { ...@@ -26,15 +29,33 @@ export default {
}, },
data() { data() {
return { return {
showTooltip: false, tooltipDisabled: true,
}; };
}, },
computed: {
classes() {
if (this.tooltipDisabled) {
return '';
}
return 'js-show-tooltip';
},
tooltip() {
return {
title: this.title,
placement: this.placement,
disabled: this.tooltipDisabled,
};
},
},
watch: { watch: {
title() { title() {
// Wait on $nextTick in case of slot width changes // Wait on $nextTick in case the slot width changes
this.$nextTick(this.updateTooltip); this.$nextTick(this.updateTooltip);
}, },
}, },
created() {
this.updateTooltipDebounced = debounce(this.updateTooltip, UPDATE_TOOLTIP_DEBOUNCED_WAIT_MS);
},
mounted() { mounted() {
this.updateTooltip(); this.updateTooltip();
}, },
...@@ -45,25 +66,20 @@ export default { ...@@ -45,25 +66,20 @@ export default {
} else if (this.truncateTarget === 'child') { } else if (this.truncateTarget === 'child') {
return this.$el.childNodes[0]; return this.$el.childNodes[0];
} }
return this.$el; return this.$el;
}, },
updateTooltip() { updateTooltip() {
const target = this.selectTarget(); this.tooltipDisabled = !hasHorizontalOverflow(this.selectTarget());
this.showTooltip = hasHorizontalOverflow(target); },
onResize() {
this.updateTooltipDebounced();
}, },
}, },
}; };
</script> </script>
<template> <template>
<span <span v-gl-tooltip="tooltip" v-gl-resize-observer="onResize" :class="classes" class="gl-min-w-0">
v-if="showTooltip"
v-gl-tooltip="{ placement }"
:title="title"
class="js-show-tooltip gl-min-w-0"
>
<slot></slot> <slot></slot>
</span> </span>
<span v-else class="gl-min-w-0"> <slot></slot> </span>
</template> </template>
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