封装一个element ui 按钮 组件 鼠标移入会提示信息

以下是一个基本的Element UI按钮组件，当鼠标移入时，会显示提示信息：

<template>
  <el-tooltip :content="tooltipContent" placement="top-start">
    <el-button type="primary" @mouseenter="showTooltip" @mouseleave="hideTooltip">{{ buttonText }}</el-button>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    buttonText: {
      type: String,
      required: true,
    },
    tooltipText: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      tooltipContent: '',
    };
  },
  methods: {
    showTooltip() {
      this.tooltipContent = this.tooltipText;
    },
    hideTooltip() {
      this.tooltipContent = '';
    },
  },
};
</script>

在上面的代码中，我们使用了Element UI的el-tooltip组件来显示提示信息。我们将按钮包装在el-tooltip组件内，并在content属性中设置要显示的提示文本。

我们还定义了两个方法来处理鼠标移入和移出事件。当鼠标移入时，我们将提示文本设置为tooltipContent变量的值，当鼠标移出时，我们将tooltipContent设置为空字符串，以便在元素上不再显示提示。

最后，我们通过buttonText和tooltipText props来设置按钮的文本和提示文本。