基于vue2语法封装文字提示组件tooltip

在Vue 2中创建一个基础的文字提示组件（Tooltip），可以按照以下步骤进行：

1. 首先，安装依赖：

npm install vue @vue/cli-plugin-component --save

2. 创建一个新的组件文件，例如`Tooltip.vue`:

<template>
  <div class="tooltip">
    <button :title="tipText" ref="trigger">点击显示提示</button>
    <span v-if="showTip" class="tooltip-content">{{ tipText }}</span>
  </div>
</template>

<script>
export default {
  name: 'Tooltip',
  props: {
    tipText: {
      type: String,
      required: true,
      default: ''
    },
    showTip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tooltipVisible: false, // 组件内部状态，用于控制提示内容是否显示
    };
  },
  watch: {
    showTip(newVal) { // 当外部传入的showTip属性改变时更新组件状态
      this.tooltipVisible = newVal;
    }
  },
  methods: {
    toggleTooltip() { // 显示或隐藏提示
      this.showTip = !this.showTip;
    },
  },
  mounted() {
    this.$refs.trigger.addEventListener('mouseover', this.toggleTooltip); // 监听触发事件
    this.$refs.trigger.addEventListener('mouseout', () => {
      this.toggleTooltip();
      setTimeout(() => {
        this.tooltipVisible = false; // 弹出后一段时间自动隐藏
      }, 500);
    });
  },
  beforeDestroy() {
    this.$refs.trigger.removeEventListener('mouseover', this.toggleTooltip);
    this.$refs.trigger.removeEventListener('mouseout', this.toggleTooltip);
  },
};
</script>

<style scoped>
.tooltip {
  position: relative;
}

.tooltip-content {
  position: absolute;
  z-index: 999;
  background-color: #000;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltip-content {
  opacity: 1;
}
</style>

这个组件接收`tipText`作为提示文字，`showTip`作为是否显示提示的状态，并在鼠标悬停时显示或隐藏提示。当组件销毁时，会移除事件监听。