element用户提示框

Element UI库提供了一个非常方便的组件来创建用户提示框，它称为 `el-tooltip`。这个组件可以用于任何需要提示的元素，例如按钮、链接、图标等。

以下是一个基本的示例：

<el-tooltip content="这是一个提示框">
  <button>按钮</button>
</el-tooltip>

这将在鼠标悬停在按钮上时显示一个提示框，内容为“这是一个提示框”。

您还可以使用 `placement` 属性来控制提示框的位置。例如，要将提示框放置在元素的下方，可以这样写：

<el-tooltip content="这是一个提示框" placement="bottom">
  <button>按钮</button>
</el-tooltip>

同样，您可以使用 `open-delay` 和 `hide-delay` 属性来控制提示框的出现和消失延迟时间。

<el-tooltip content="这是一个提示框" :open-delay="1000" :hide-delay="500">
  <button>按钮</button>
</el-tooltip>

这将在鼠标悬停在按钮上1秒钟后显示提示框，并在鼠标离开按钮后0.5秒钟后隐藏提示框。

您还可以使用 `manual` 属性来手动控制提示框的显示和隐藏。例如，要在代码中控制提示框的显示和隐藏，可以这样写：

<el-tooltip content="这是一个提示框" :manual="true" ref="tooltip">
  <button @mouseover="showTooltip" @mouseleave="hideTooltip">按钮</button>
</el-tooltip>

methods: {
  showTooltip() {
    this.$refs.tooltip.showPopper();
  },
  hideTooltip() {
    this.$refs.tooltip.hidePopper();
  }
}

这将在鼠标悬停在按钮上时显示提示框，并在鼠标离开按钮时隐藏提示框。