elementUI - tooltip封装，可针对任意元素显示

背景：在业务实现的过程中，很多场景需要使用tooltip进行提示，比如 ①超出显示省略号，鼠标移入的时候进行提示。②针对某个文案进行提示。③针对某些状态进行提示……

方案一：原生title属性

优点

1. 对于开发者来说，只需要给对应的元素添加title属性；

缺点

1. 显示的时间不可控，用户很难感知到；
2. UI效果不美观；
3. 如果页面有大量title、或者title的内容过长，都会影响页面性能；

方案二：element-ui的 (tooltip)

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
 <el-button>上左</el-button>
</el-tooltip>

优点

1. 可控制显示时间、时长、主题等；

缺点

1. 针对某个具体的元素，进行包裹，但如果页面上很多需要tooltip进行提示元素，就要每个地方写一遍包裹
2. 每个包裹都会生成一个DOM元素

<div role="tooltip" id="el-tooltip-5246" aria-hidden="true" class="el-tooltip__popper is-dark" style="transform-origin: center top; z-index: 303; display: none;">
    Top Center 提示文字
    <div x-arrow="" class="popper__arrow" style="left: 61px;"></div>
</div>

方案三：只写一个el-tooltip标签，自定义显示内容和显示元素

.a {
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<div>
    <div
      class="a"
      ref="testDiv"
    >
      Lorem ipsum dolor sit3333333
    </div>
    <hr />
    <div
      class="a"
      ref="testDiv"
    >
      Lorem
    </div>
    <el-tooltip ref="tooltip" content="提示内容"> </el-tooltip>
 </div>

import { throttle } from 'lodash'

mounted() {
    this.$nextTick(() => {
      const a = Array.from(document.getElementsByClassName('a'))
      a.forEach((item) => {
        item.addEventListener('mouseenter', (el) => this.showTooltip(el))
        item.addEventListener('mouseleave', (e) => {
          this.handleMouseLeave(e)
        })
      })
    })
},
methods: {
    showTooltip(el) {
          if (el.target.scrollWidth > el.target.offsetWidth) {
          // 有省略号
            const { tooltip } = this.$refs
            tooltip.referenceElm = el.target
            console.log(tooltip.referenceElm)
            tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
            tooltip.doDestroy()
            tooltip.setExpectedState(true)
            this.activateTooltip(tooltip)
      }
    },
    handleMouseLeave() {
      const { tooltip } = this.$refs
      if (tooltip) {
        tooltip.setExpectedState(false)
        tooltip.handleClosePopper()
      }
    },
    activateTooltip: throttle((tooltip) => {
      tooltip.handleShowPopper()
    }, 50),
}

优点

1. 集齐方案二的优点；
2. 只会生成一个dom元素；

缺点

1. 也许还有别的方案😋

参考elementUI的table组件实现