React bootstrap table with tooltip

Question

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?

score 3 · Answer 1 · answered Apr 23 '20 at 00:28

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>

score 1 · Answer 2 · answered Feb 13 '20 at 06:55

1

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>

answered Feb 13 '20 at 06:55

Shivprsad Sammbhare

410
3
7
20

score 0 · Answer 3 · answered Aug 09 '16 at 22:07

0

Set your tooltip component 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.

answered Aug 09 '16 at 22:07

RacheleM

46
1
5

React bootstrap table with tooltip

3 Answers3