vue3 tooltip 组件封装

<template>
  <div class="tooltip-container" @mouseover="showTooltip" @mouseout="hideTooltip">
    <slot></slot>
    <div v-if="isTooltipVisible" class="tooltip-content">
      {{ content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  content: {
    type: String,
    required: true
  }
});

const isTooltipVisible = ref(false);

const showTooltip = () => {
  isTooltipVisible.value = true;
};

const hideTooltip = () => {
  isTooltipVisible.value = false;
};
</script>

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

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}

.tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
</style>