SOURCE

// 获取style
function getStyle(obj, attr) {
  if (obj.currentStyle) {
      return obj.currentStyle[attr];
  } else {
      return getComputedStyle(obj)[attr];
  }
}

new Vue({
    el: '#app',
    data() {
		return {
			// 为el-tooltip设置content值
			tooltipContent: ''
		}
    },
	directives: {
		overflowTooltip: {
			inserted(el, binding, vnode, oldVnode) {
				const tooltip = vnode.context.$refs.tooltip
                el.__vueOverflowTooltipMouseenter__ = function() {
					const childNodesLength = el.childNodes.length
					if (childNodesLength) {
						const range = document.createRange();
						range.setStart(el, 0);
						range.setEnd(el, childNodesLength);
						const rangeWidth = range.getBoundingClientRect().width;
						const boxSizing = getStyle(el, 'boxSizing');
						const padding = boxSizing === 'border-box' ? 0 : (parseInt(getStyle(el, 'paddingLeft'), 10) + parseInt(getStyle(el, 'paddingRight'), 10))

						if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
							vnode.context.$data.tooltipContent = el.innerText || el.textContent;
							tooltip.referenceElm = el;
							tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
							tooltip.doDestroy();
							tooltip.setExpectedState(true);
							tooltip.handleShowPopper()
						}
					}
				}

                el.__vueOverflowTooltipMouseleave__ = function() {
					tooltip.setExpectedState(false);
					tooltip.handleClosePopper();
				}

                // 绑定事件
                el.addEventListener('mouseenter', el.__vueOverflowTooltipMouseenter__);
                el.addEventListener('mouseleave', el.__vueOverflowTooltipMouseleave__);
			},
            unbind() {
                el.removeEventListener('mouseenter', el.__vueOverflowTooltipMouseenter__);
                el.removeEventListener('mouseleave', el.__vueOverflowTooltipMouseleave__);
                delete el.__vueOverflowTooltipMouseenter__;
                delete el.__vueOverflowTooltipMouseleave__; 
            }
		}
	}
})

<div id="app">
	<div class="t-ellipsis" v-overflow-tooltip style="width: 80%;">
		文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
	</div>
	<div class="t-ellipsis" v-overflow-tooltip style="width: 30%;">
		文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
	</div>

	 <!-- 添加本组件全局公用el-tooltip -->
	<el-tooltip  placement="top" ref="tooltip" :content="tooltipContent"></el-tooltip>
</div>

.t-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}