diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-08-15 13:06:50 -0500 |
---|---|---|
committer | Paul Slaughter <pslaughter@gitlab.com> | 2018-08-21 08:20:38 -0500 |
commit | 243a209372cfe18c4963b6414036244762b3407d (patch) | |
tree | 0a1f17c77b65b4c37e2b982210c01877e897787f /app/assets/javascripts/vue_shared/components | |
parent | 97572d4223092a75fd9dbd1c72c947d933c6d520 (diff) | |
download | gitlab-ce-243a209372cfe18c4963b6414036244762b3407d.tar.gz |
Create TooltipOnTruncate component to show tooltip only when needed
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue | 67 |
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> |