Create TooltipOnTruncate component to show tooltip only when needed

1 files changed, 67 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
new file mode 100644
index 00000000000..125826da6c3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
@@ -0,0 +1,67 @@
+<script>
+import _ from 'underscore';
+import tooltip from '../directives/tooltip';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    truncateTarget: {
+      type: [String, Function],
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
+  mounted() {
+    const target = this.selectTarget();
+
+    if (target && target.scrollWidth > target.offsetWidth) {
+      this.showTooltip = true;
+    }
+  },
+  methods: {
+    selectTarget() {
+      if (_.isFunction(this.truncateTarget)) {
+        return this.truncateTarget(this.$el);
+      } else if (this.truncateTarget === 'child') {
+        return this.$el.childNodes[0];
+      }
+
+      return this.$el;
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-tooltip
+    v-if="showTooltip"
+    :title="title"
+    :data-placement="placement"
+    class="js-show-tooltip"
+  >
+    <slot></slot>
+  </span>
+  <span
+    v-else
+  >
+    <slot></slot>
+  </span>
+</template>