I am using a react bootstrap table to display some data stored in the info array.

<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>

Some of the rows may have an extra property oldPrice, which I would like to show as a tooltip over the shown price. How can I do that?

I am using a react bootstrap table to display some data stored in the info array.

<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>

Some of the rows may have an extra property oldPrice, which I would like to show as a tooltip over the shown price. How can I do that?

• javascript
• css
• tooltip
• react-bootstrap-table

3 Answers 3

Related, if you want to display the cell's value on hovering, you need to write a little function:

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

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

You can use columnTitle property as columnTitle="Put your old price here"

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

Set your tooltip ponent up outside the BootstrapTable. Use the columnClassName attribute on TableHeaderColumn to give your price cells a class that you can attach your tooltip to using tether.