指令 v-tooltip

import Vue from 'vue'
/* eslint-disable */

Vue.directive('tooltip', {
  inserted(el, binding, vnode, oldVnode) {
    // 获取app.vue根节点下的 ref为tooltip的el-tooltip组件
    const tooltip = vnode.context.$root._vnode.child.$refs.tooltip
    const { content, placement='top' } = binding.value || { content: '', placement: 'top' }

    // 给添加指令的el对象添加鼠标移入事件
    el.__vueTooltipMouseenter__ = function() {
      // 获取content值，如果没有则取innerText 或 textContent
      tooltip.$parent.$data.tooltipContent = content || el.innerText || el.textContent;
      tooltip.$parent.$data.tooltipPlacement = placement;
      // 关联el
      tooltip.referenceElm = el;
      // 隐藏之前打开的popper
      tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
      tooltip.doDestroy();
      tooltip.setExpectedState(true);
      tooltip.handleShowPopper();
    } 
    // 给添加指令的el对象添加鼠标移入事件
    el.__vueTooltipMouseleave__ = function() {
      tooltip.setExpectedState(false);
      tooltip.handleClosePopper();
    } 
    // 绑定事件
    el.addEventListener('mouseenter', el.__vueTooltipMouseenter__);
    el.addEventListener('mouseleave', el.__vueTooltipMouseleave__);
  },
  unbind(el, binding, vnode, oldVnode) {
    el.removeEventListener('mouseenter', el.__vueTooltipMouseenter__);
    el.removeEventListener('mouseleave', el.__vueTooltipMouseleave__);
    delete el.__vueTooltipMouseenter__;
    delete el.__vueTooltipMouseleave__;
  },
  update: function () {},
  componentUpdated: function () {}
})

<template>
  <div id="app">
    ...
    <router-view/>
    <!-- 添加全局公用el-tooltip -->
    <el-tooltip  :placement="tooltipPlacement" ref="tooltip" :content="tooltipContent"></el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      /* 为el-tooltip设置content值 */
      tooltipContent: '',
      /* 为el-tooltip设置placement值 */
      tooltipPlacement: 'top'
    }
  },
  components: {
  },
  mounted() {
  },
  created() {
  },
  methods: {
  }
}
</script>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
// 引入tooltip指令
import '@/directive/tooltip'


Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(window.ELEMENT, {
  size: 'small'
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <div>
        <div class="t-ellipsis" v-tooltip">
            文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
        </div>
        <div class="t-ellipsis" v-tooltip="{content: '描述说明'}" >
            文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
        </div>
        <div class="t-ellipsis" v-tooltip="{content: '描述说明', placement: 'right' }" >
            文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style>
</style>