我使用“react-data-table-component”将我的数据显示到 TableView 中。 如果文本长于单元格的大小，它在末尾显示为“...”，但问题是当我悬停时没有显示全文的工具提示。

我的问题是该库是否支持工具提示，或者它支持但我的代码缺少该部分？

这是我的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import DataTable from 'react-data-table-component';    

export default class MyTable2 extends React.Component {
  constructor(props) {
    super(props);

    const data = [];

    for (var i = 0; i < 200; i++) {
      data.push({ id: i, title: 'Lorem Ipsum' + i, summary: 'Lorem ipsum dolor sit amet, morbi molestie sagittis. Fusce neque pharetra elementum ante praesent et, non non nulla enim, velit amet sit convallis sit, sit donec ac odio quis sem.', year: '1982', expanderDisabled: true, image: 'http://conan.image.png' })
    }

    this.state = {
      rs: data
    }
  }

  render() {    

    const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
      },
      {
        name: 'Summary',
        selector: 'summary',
        sortable: true
      },
      {
        name: 'Year',
        selector: 'year',
        sortable: true
      },
    ];

    const myNewTheme = {
      rows: {
        fontSize: '25px'
      }
    }

    const handleChange = (state) => {
      console.log('Selected Rows: ', state.selectedRows);
    };

    return (
      <DataTable         
        className="dataTables_wrapper"
        noHeader
        columns={columns}
        data={this.state.rs}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        pagination
      />
    )
  }
}

编辑:我添加了我使用的库的引用 here

最佳答案

这可能只是一个 css 样式问题，在某些 css 类中类似于 text-overflow: ellipsis;。

关于reactjs - 如果文本很长，React 'react-data-table-component' 悬停时不显示工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57374550/