<template>
  <div class="tooltip-button-wrapper" @mouseleave="hideTooltip">
    <el-button icon="el-icon-warning-outline" type="text" @click="showTooltip">
      <!-- 这里可以使用Element UI提供的图标，或者自定义图标 -->
    </el-button>
    <transition name="fade">
      <div v-if="tooltipVisible" class="tooltip-content" @mouseleave="hideTooltip">
        <!-- 提示文字内容 -->
        <p>{{ tooltipText }}</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false,
      tooltipText: '提示:双击列表项可编辑查看详情。', // 你可以通过props传递这个文本
    };
  },
  methods: {
    showTooltip() {
      this.tooltipVisible = true;
    },
    hideTooltip() {
      this.tooltipVisible = false;
    },
  },
};
</script>

<style scoped>
.tooltip-button-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  top: 100%; /* 根据需要调整位置 */
  left: 0;
  transform: none;
  padding: 10px;
  background-color: #ebeef5;
  opacity: 1;
  border: 1px solid #ccc;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保提示框在其他内容之上 */
  white-space: nowrap; /* 防止文本换行 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
