如何实现在GridView每行hover时显示tooltip？

一、简单原生实现（利用title属性） #

这是最快捷的方案，直接给每行<tr>添加title属性，内容为该行的详细数据。

后端渲染时直接添加 #

如果是后端生成GridView，可在渲染<tr>标签时直接拼接tooltip内容：

<tr title="用户ID：123 | 用户名：张三 | 邮箱：zhangsan@example.com">
  <td>123</td>
  <td>张三</td>
  <td>zhangsan@example.com</td>
</tr>

前端动态设置 #

如果需要前端动态生成tooltip内容，用原生JS遍历行并设置：

// 假设GridView是一个table元素
document.querySelectorAll('table tr').forEach(tr => {
  const cells = tr.querySelectorAll('td');
  // 根据列顺序拼接内容，可按需调整
  const tooltipText = `用户ID：${cells[0].textContent} | 用户名：${cells[1].textContent} | 邮箱：${cells[2].textContent}`;
  tr.setAttribute('title', tooltipText);
});

二、自定义样式Tooltip（更美观） #

原生title样式无法修改，若需要自定义样式，可通过CSS+JS实现：

步骤1：添加CSS样式 #

.custom-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  pointer-events: none; /* 避免干扰鼠标事件 */
}

步骤2：添加JS交互逻辑 #

const tableRows = document.querySelectorAll('table tr');

tableRows.forEach(tr => {
  // 鼠标进入时创建并显示tooltip
  tr.addEventListener('mouseenter', (e) => {
    const cells = tr.querySelectorAll('td');
    // 构造tooltip内容，支持HTML格式
    const tooltipContent = `
      <div>用户ID：${cells[0].textContent}</div>
      <div>用户名：${cells[1].textContent}</div>
      <div>邮箱：${cells[2].textContent}</div>
    `;
    
    const tooltip = document.createElement('div');
    tooltip.className = 'custom-tooltip';
    tooltip.innerHTML = tooltipContent;
    document.body.appendChild(tooltip);
    
    // 定位到鼠标位置附近
    tooltip.style.left = `${e.pageX + 10}px`;
    tooltip.style.top = `${e.pageY + 10}px`;
    
    // 存储tooltip元素，方便离开时移除
    tr.tooltipElement = tooltip;
  });

  // 鼠标离开时移除tooltip
  tr.addEventListener('mouseleave', () => {
    if (tr.tooltipElement) {
      tr.tooltipElement.remove();
      delete tr.tooltipElement;
    }
  });
});

三、jQuery简化实现 #

如果项目已引入jQuery，可通过hover方法快速实现：

$('table tr').hover(function(e) {
  const $cells = $(this).find('td');
  const tooltipText = `用户ID：${$cells.eq(0).text()} | 用户名：${$cells.eq(1).text()} | 邮箱：${$cells.eq(2).text()}`;
  
  // 创建并插入自定义tooltip
  $('<div class="custom-tooltip"></div>')
    .text(tooltipText)
    .appendTo('body')
    .css({
      left: e.pageX + 10,
      top: e.pageY + 10,
      position: 'absolute',
      background: '#333',
      color: '#fff',
      padding: '8px 12px',
      borderRadius: '4px',
      zIndex: 1000
    });
}, function() {
  // 鼠标离开时移除tooltip
  $('.custom-tooltip').remove();
});

四、前端框架方案（Vue/React） #

如果用Vue或React的表格组件（如Element UI的el-table、Ant Design的Table），可直接利用组件库自带的Tooltip组件：

Vue + Element UI示例 #

<el-table :data="tableData" row-key="id">
  <el-table-column prop="id" label="用户ID"></el-table-column>
  <el-table-column prop="name" label="用户名"></el-table-column>
  <el-table-column prop="email" label="邮箱"></el-table-column>

  <!-- 自定义行Tooltip -->
  <template #default="scope">
    <el-tooltip 
      effect="dark" 
      :content="`用户ID：${scope.row.id} | 用户名：${scope.row.name} | 邮箱：${scope.row.email}`"
      placement="top-start"
    >
      <tr>
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.name }}</td>
        <td>{{ scope.row.email }}</td>
      </tr>
    </el-tooltip>
  </template>
</el-table>

React + Ant Design示例 #

import { Table, Tooltip } from 'antd';

const columns = [
  { title: '用户ID', dataIndex: 'id', key: 'id' },
  { title: '用户名', dataIndex: 'name', key: 'name' },
  { title: '邮箱', dataIndex: 'email', key: 'email' },
];

const tableData = [
  { id: 123, name: '张三', email: 'zhangsan@example.com' },
];

const GridView = () => {
  // 自定义行渲染，包裹Tooltip
  const renderTableRow = (record) => (
    <Tooltip 
      title={`用户ID：${record.id} | 用户名：${record.name} | 邮箱：${record.email}`}
      placement="top-start"
    >
      <tr>
        <td>{record.id}</td>
        <td>{record.name}</td>
        <td>{record.email}</td>
      </tr>
    </Tooltip>
  );

  return (
    <Table 
      columns={columns} 
      dataSource={tableData} 
      components={{ body: { row: renderTableRow } }} 
    />
  );
};

export default GridView;

内容的提问来源于stack exchange，提问作者Vasi