自定义指令实现文字Tooltip

Vue自定义指令代码 

Vue.directive('textPop', el => {
  el.style.whiteSpace = 'nowrap' // 默认使用此指令必须一行显示
  el.style.cursor = 'pointer' //  使用此指令DOM强制变小手
  const realityWidth = el.scrollWidth // 实际宽度
  const dummy = el.clientWidth //虚拟宽度
  if (realityWidth > dummy) {
    el.style.overflow = 'hidden'
    el.style.textOverflow = 'ellipsis'
    el.addEventListener('mouseenter', (e) => {
      if (document.getElementsByClassName('v-directive-textPop').length) return
      const popDiv = document.createElement('div')
      const cssObj = e.target.getBoundingClientRect()
      popDiv.className = 'v-directive-textPop'
      popDiv.style.left = `${cssObj.left - (cssObj.width / 2)}px`
      popDiv.style.top = `${cssObj.top - cssObj.height - 30}px`
      popDiv.textContent = e.target.innerText
      document.body.appendChild(popDiv)
    })
    el.addEventListener('mouseleave', () => {
      const popList = document.getElementsByClassName('v-directive-textPop')
      if (!popList || !popList.length) return
      document.body.removeChild(popList[0])
    })
  }
})

css全局样式代码

.v-directive-textPop {
  position: fixed;
  border-radius: 5px;
  padding: 10px;
  font-size: 0.8rem;
  cursor: pointer;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0px 1px #ccc;
  z-index: 2022;
  &::after {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 5px solid #000;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
  }
}

 使用方式

 <div v-textPop style="width : 100px;">hello,word!today is very Good</div>

实现效果

 

 目前只开发了dark风格的Tooltip！后续有时间可更迭其他风格和更多自定义选项！