写一个v-tooltip指令

好的，这里是一个简单的`v-tooltip`指令的实现。该指令可以将鼠标悬浮在元素上时显示提示框，提示框的内容可以通过指令的参数或者绑定的值动态设置。

// 自定义指令
Vue.directive('tooltip', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    const tooltipText = binding.value || binding.arg || ''
    el.addEventListener('mouseenter', function () {
      // 创建提示框
      const tooltip = document.createElement('div')
      tooltip.innerHTML = tooltipText
      tooltip.style.position = 'absolute'
      tooltip.style.top = `${event.clientY + 10}px`
      tooltip.style.left = `${event.clientX + 10}px`
      tooltip.style.backgroundColor = '#333'
      tooltip.style.color = '#fff'
      tooltip.style.padding = '5px'
      tooltip.style.zIndex = 9999
      // 将提示框添加到DOM中
      document.body.appendChild(tooltip)
      // 鼠标移出元素时，删除提示框
      el.addEventListener('mouseleave', function () {
        document.body.removeChild(tooltip)
      })
    })
  }
})

在使用时，在需要添加提示框的元素上使用`v-tooltip`指令，并且可以将提示框的内容作为指令的参数或者绑定的值来设置，例如：

<template>
  <div>
    <span v-tooltip="'这是一个提示框'">鼠标放在这里</span>
    <span v-tooltip:top="'这是一个提示框'">鼠标放在这里</span>
    <span v-tooltip="tooltipText">鼠标放在这里</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipText: '这是一个提示框'
    }
  }
}
</script>

在上面的代码中，我们分别使用了指令的参数、修饰符和动态绑定来设置提示框的内容。当鼠标悬浮在元素上时，会显示相应的提示框，当鼠标离开元素时，提示框会消失。