如果文本太长，React 'react-data-table-component‘在悬停时不会显示工具提示

Question

我使用'react- data - table -component‘将数据显示到表视图中。如果文本长度大于单元格的大小，则显示为"...“在最后，但问题是，当我悬停时，没有显示全文的工具提示。

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

下面是我的代码：

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的库的引用

Answer 1

这可能只是一个css样式的问题，就像一些css类中的text-overflow: ellipsis;。

Answer 2

您可以使用width属性：

{
        name: 'Proveedor',
        selector: 'PROVEEDOR',
        sortable: true,
        center: true,
        style: {
            justifyContent: 'left',
        },
        width: '300px'
    },