如何在React.js的Name列实现文本悬停效果

假设你使用的是react-bootstrap-table-next（你的列配置结构匹配该库），以下是两种实用的实现方式：

方式一：原生浏览器提示（最简方案） #

直接给Name列的单元格添加title属性，鼠标悬停时会触发浏览器默认的提示框。修改列配置如下：

const columns = [
  {
    dataField: "year",
    text: "Year",
    sort: true,
    headerAlign: "center"
  },
  {
    dataField: "name",
    text: "Name",
    sort: true,
    headerAlign: "center",
    // 自定义单元格渲染，添加title属性
    formatter: (cellContent) => {
      return <span title={cellContent}>{cellContent}</span>;
    }
  },
  {
    dataField: "count",
    text: "Count",
    sort: true,
    headerAlign: "center"
  }
];

这种方式无需额外依赖，适合快速实现基础悬停提示。

方式二：自定义样式提示框（美观可控） #

如果需要自定义提示框的样式，可以用CSS配合自定义组件实现：

1. 编写CSS样式 #

.name-cell {
  position: relative;
  cursor: pointer;
}

.name-tooltip {
  display: none;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #2d3748;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 100;
}

.name-cell:hover .name-tooltip {
  display: block;
}

2. 修改列配置的formatter #

const columns = [
  // 其他列保持不变
  {
    dataField: "name",
    text: "Name",
    sort: true,
    headerAlign: "center",
    formatter: (cellContent) => {
      return (
        <div className="name-cell">
          {cellContent}
          <div className="name-tooltip">{cellContent}</div>
        </div>
      );
    }
  }
];

你可以根据需求调整CSS中的样式，比如背景色、字体大小、提示框位置等。

通用思路 #

不管你用的是哪种React表格库，核心逻辑都是：找到对应列的自定义单元格渲染方法，在渲染时添加悬停相关的元素（如带title的span、自定义Tooltip容器）或事件监听。

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