文本超长隐藏，悬浮显示

项目场景：

文件图标名称超长隐藏，做悬浮显示

---

解决方案一：

组件：

<template>
  <div v-if="isTooltipVisible" ref="tooltip" class="custom-tooltip">
    {{ props.text }}
  </div>
</template>

<script setup>
  import { ref, defineProps, onMounted, onUnmounted } from 'vue'

  const props = defineProps({
    text: String,
  })

  const isTooltipVisible = ref(false)
  const tooltip = ref(null)

  defineExpose({
    show() {
      isTooltipVisible.value = true
    },
    hide() {
      isTooltipVisible.value = false
    },
    updatePosition(event) {
      if (tooltip.value) {
        const x = event.clientX + 10 // 避免遮挡鼠标指针
        const y = event.clientY + 10 // 避免遮挡鼠标指针
        tooltip.value.style.left = `${x}px`
        tooltip.value.style.top = `${y}px`
      }
    },
  })
</script>
<style>
  .custom-tooltip {
    position: fixed; /* 使用固定定位以便跟随鼠标移动 */
    background: #000; /* 黑色背景 */
    color: white; /* 白色文字 */
    padding: 8px;
    max-width: 300px; /* 设置最大宽度 */
    white-space: pre-wrap; /* 允许多行文本 */
    z-index: 1000;
    pointer-events: none; /* 避免干扰鼠标事件 */
    border-radius: 4px;
  }
</style>

父组件：

        <div
          class="pjtName"
          @mouseenter="showTooltip(index)"
          @mouseleave="hideTooltip(index)"
          @mousemove="updateTooltipPosition($event, index)"
        >
          {{ item.name }}
          <NameTip ref="tooltips" :text="item.name" />
        </div>

import NameTip from './nameTip.vue'

  const showTooltip = (index) => {
    tooltips.value[index].show()
  }

  const hideTooltip = (index) => {
    tooltips.value[index].hide()
  }

  const updateTooltipPosition = (event, index) => {
    tooltips.value[index].updatePosition(event)
  }

---

解决方案二：

<p class="pjtName" :title="item.name">
  {{ item.name }}
</p>
悬浮框为黑框白底黑字，貌似样式不好修改