如果文本很长，则在悬停时 React 'react-data-table-component' 不显示工具提示答案

【问题标题】：React 'react-data-table-component' doesn't show a tool tip when hover if the text is long如果文本很长，则在悬停时 React 'react-data-table-component' 不显示工具提示
【发布时间】：2019-12-13 22:03:33
【问题描述】：

我使用“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

【问题讨论】：

标签： reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以使用 width 属性：

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

【讨论】：