vue实现鼠标划过展示提示语

可以使用Vue的指令来实现鼠标划过展示提示语的效果。具体步骤如下：

1. 在Vue组件中定义需要展示提示语的元素，例如一个按钮：

<button v-tooltip="tooltipText">Hover me</button>

2. 在Vue组件中定义v-tooltip指令：

Vue.directive('tooltip', {
  bind: function(el, binding) {
    // 当鼠标进入元素时显示提示语
    el.addEventListener('mouseenter', function() {
      // 创建提示语DOM节点
      const tooltip = document.createElement('div');
      tooltip.className = 'tooltip';
      tooltip.textContent = binding.value;
      // 将提示语DOM节点添加到body中
      document.body.appendChild(tooltip);
      // 设置提示语的位置
      tooltip.style.top = el.offsetTop + el.offsetHeight + 'px';
      tooltip.style.left = el.offsetLeft + 'px';
    });
    // 当鼠标离开元素时隐藏提示语
    el.addEventListener('mouseleave', function() {
      // 删除提示语DOM节点
      const tooltip = document.querySelector('.tooltip');
      if (tooltip) {
        tooltip.parentNode.removeChild(tooltip);
      }
    });
  }
});

3. 在CSS文件中定义提示语的样式：

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 4px;
  font-size: 12px;
}

这样，当鼠标划过按钮时，就会展示相应的提示语了。