【vue/js】文字超长悬停显示的几种方式

方法一：::after伪元素+content

1. CSS 修改 ：
   样式添加悬停提示效果，当鼠标悬停在文本上时显示完整内容：

.grid-item-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  user-select: text;
  position: relative;
  
  // 创建伪元素作为工具提示
  &::after {
    content: attr(data-full-text);  // 使用 data-full-text 属性的内容
    position: absolute;
    bottom: 100%;                   // 显示在元素上方
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;         // 深色背景
    color: white;                   // 白色文字
    padding: 4px 8px;               // 内边距
    border-radius: 4px;             // 圆角
    white-space: normal;            // 允许换行
    word-break: break-all;          // 强制换行
    max-width: 200px;               // 最大宽度
    z-index: 100;                   // 确保显示在最上层
    opacity: 0;                     // 默认隐藏
    pointer-events: none;           // 不响应鼠标事件
    transition: opacity 0.2s;       // 渐显动画
  }
  
  // 悬停时显示完整文本
  &:hover::after {
    opacity: 1;
  }
}

2. 模板修改 ：
   更新模板代码，将完整文本存储在 data-full-text 属性中：

<div 
  class="grid-item-value" 
  :data-full-text="consoleStore.activeRobot[item.value] == undefined ? '--' : consoleStore.activeRobot[item.value]"
>
  {{
    consoleStore.activeRobot[item.value] == undefined
      ? '--'
      : consoleStore.activeRobot[item.value]
  }}
</div>

你说得对，当前的定位确实有问题。现在的 tooltip 是相对于整个 .grid-item-value 元素定位的，但我们需要让它相对于父容器（.grid-info 或 .content）正确定位。让我帮你调整一下实现方式。

有两种更好的解决方案：

方法二：使用 Element Plus 的 Tooltip 组件

<template>
  <div v-if="props.pannel.type === 'robot'" class="grid-info">
    <div v-for="(item, index) in consoleStore.robotData" :key="index" class="grid-item">
      <div class="grid-item-title">{{ item.title }}</div>
      <el-tooltip 
        :content="consoleStore.activeRobot[item.value] == undefined ? '--' : consoleStore.activeRobot[item.value]" 
        placement="top"
        :disabled="!consoleStore.activeRobot[item.value] || consoleStore.activeRobot[item.value].length <= 10"
      >
        <div class="grid-item-value">
          {{
            consoleStore.activeRobot[item.value] == undefined
              ? '--'
              : consoleStore.activeRobot[item.value]
          }}
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

方法三：使用原生 HTML title 属性（最简单）

<div 
  class="grid-item-value" 
  :title="consoleStore.activeRobot[item.value] == undefined ? '--' : consoleStore.activeRobot[item.value]"
>
  {{
    consoleStore.activeRobot[item.value] == undefined
      ? '--'
      : consoleStore.activeRobot[item.value]
  }}
</div>

大家可以根据自身项目情况，选择最合适方案。