使用工具提示反应引导表答案

【问题标题】：React bootstrap table with tooltip使用工具提示反应引导表
【发布时间】：2016-06-24 13:30:08
【问题描述】：

我正在使用 react bootstrap 表来显示存储在 info 数组中的一些数据。

<BootstrapTable data={info} striped={true} hover={true} search={true} condensed={true} selectRow={selectRowProp(onRowSelect, info, selected)}>
    <TableHeaderColumn isKey={true} dataField="name"> Name </TableHeaderColumn>
    <TableHeaderColumn dataField="class"> Class </TableHeaderColumn>
    <TableHeaderColumn dataFormat={myStyle} dataField="price"> Price </TableHeaderColumn>
</BootstrapTable>

某些行可能有一个额外的属性oldPrice，我想将其显示为显示价格的工具提示。我该怎么做？

【问题讨论】：

标签： javascript css tooltip react-bootstrap-table

【解决方案1】：

相关，如果要在悬停时显示单元格的值，则需要编写一个小函数：

const columnHover = (cell, row, enumObject, rowIndex) => {
    return cell
  }

<TableHeaderColumn
    width='260px'
    dataField='cellContents'
    editable={false}
    dataSort
    columnTitle={columnHover}
    >
    Some text
</TableHeaderColumn>

【讨论】：

【解决方案2】：

您可以使用 columnTitle 属性作为 columnTitle="Put your old price here"

<TableHeaderColumn dataFormat={myStyle} dataField="price" columnTitle="Put your old price here"> Price </TableHeaderColumn>

【讨论】：

【解决方案3】：

在 BootstrapTable 之外设置您的工具提示组件。使用 TableHeaderColumn 上的 columnClassName 属性为您的价格单元格提供一个类，您可以使用 tether 将工具提示附加到该类。

【讨论】：