kd-aiot-frontend-wt/src/utils/tooltip.js

import Vue from 'vue';
import { Tooltip } from 'element-ui';

// 扩展 Tooltip 组件
const TooltipConstructor = Vue.extend(Tooltip);

let tooltipInstance = null;

// 显示提示框
const showTooltip = (target, content) => {
  if (tooltipInstance) {
    tooltipInstance.$destroy();
    tooltipInstance.$el.remove();
  }

  tooltipInstance = new TooltipConstructor({
    propsData: {
      content,
      placement: 'top',
      visible: true,
      trigger: 'manual'
    }
  });
  // 手动挂载实例
  tooltipInstance.$mount(document.createElement('div'));
  document.body.appendChild(tooltipInstance.$el);

  // 设置目标元素
  tooltipInstance.referenceElm = target;
  tooltipInstance.$nextTick(() => {
    tooltipInstance.show();
  });
};

// 隐藏提示框
const hideTooltip = () => {
  //   console.log(tooltipInstance);
  if (tooltipInstance) {
    tooltipInstance.hide();
    tooltipInstance.doDestroy();
    tooltipInstance.$el.remove();
    tooltipInstance = null;
  }
};

export default {
  show: showTooltip,
  hide: hideTooltip
};