基于ElementUI实现v-tooltip指令的示例代码

  render(h) {
    // ....
    const firstElement = this.getFirstElement();
    if (!firstElement) return null;

    const data = firstElement.data = firstElement.data || {};
    data.staticClass = this.addTooltipClass(data.staticClass);

    return firstElement;
  },

mounted() {
    this.referenceElm = this.$el;
    if (this.$el.nodeType === 1) {
      this.$el.setAttribute('aria-describedby', this.tooltipId);
      this.$el.setAttribute('tabindex', this.tabindex);
      on(this.referenceElm, 'mouseenter', this.show);
      on(this.referenceElm, 'mouseleave', this.hide);
      // ...
}

<template>
  <el-tooltip ref="triggerRef" :manual="true">
    <template #content>
      {{ internalContent }}
    </template>
  </el-tooltip>
</template>

<script>
// useOverflowHidden 的逻辑自行定义
import { useOverflowHidden } from './use-overflow-hidden'
export default {
  name: 'TooltipFunction',
  props: {
    getEl: {
      type: Function,
      default: () => null
    },
    getContent: {
      type: Function,
      default: () => ''
    }
  },
  data() {
    return {
      internalContent: '',
      isHover: false,
    }
  },
  mounted() {
    const el = this.getEl()
    if (!el) return

    this.$refs.triggerRef.referenceElm = el;

    el.addEventListener('mousemove', this.onMouseEnter, false)
    el.addEventListener('mouseleave', this.onMouseLeave, false)
  },
  methods: {
    onMouseEnter() {
      if (!this.isHover && useOverflowHidden(this.getEl())) {
        this.internalContent = this.getContent()
        this.isHover = true
        this.$refs.triggerRef.showPopper = true
      }
    },
    onMouseLeave() {
      if (this.isHover) {
        this.isHover = false;
        this.$refs.triggerRef.showPopper = false
      }
    },
    onDestroy() {
      const el = this.getEl()
      if (!el) return

      el.removeEventListener('mousemove', this.onMouseEnter)
      el.removeEventListener('mouseleave', this.onMouseLeave)
    }
  },
}

</script>

import Vue from 'vue'
import TooltipFunction from './tooltipFunction.vue'

function useTooltip(el) {
  const Ctor = Vue.extend(TooltipWrapper)
  const instance = new Ctor({
    propsData: {
      getContent,
      getEl: () => el,
    },
  })

  instance.$mount()
  return instance
}

<template>
    <div ref="dataRef">foo</div>
</template>

<script>
import useTooltip from './use-tooltip.js'
export default {
    mounted() {
        const el = this.$refs.dataRef
        if (el) {
           // 获取 content 的函数逻辑自行定义
           this.tooltipIns = useTooltip(el, () => 'foo')
        }
    },
    beforeDestory() {
        this.tooltipIns?.onDestroy()
        this.tooltipIns?.$destroy()
    }
}
</script>

function setupTooltipDirection() {
  const tooltipSymbol = Symbol('tooltip')
  Vue.directive('tooltip', {
    bind(el: HTMLElement) {
     // 这里我们使用 DOM 元素上的 tooltip-content 作为 通信
      const instance = createTooltipFactory(el, () => el.getAttribute('tooltip-content') || '')
      Reflect.set(el, tooltipSymbol, instance)
    },
    unbind(el) {
      const ins = Reflect.get(el, tooltipSymbol)
      if (!ins) return

      ins.onDestroy()
      ins.$destroy()
      Reflect.set(el, tooltipSymbol, null)
    },
  })
}

<template>
    <div v-tooltip tooltip-content="hello">hello</div>
</template>