CODEWITHSUNDEEP
javascriptcsstooltipreact-bootstrap-table
Mahdi
Mahdi

Reputation: 1852

React bootstrap table with tooltip

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?

Upvotes: 5

Views: 6287

Answers (3)

Siddhartha
Siddhartha

Reputation: 4454

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>

Upvotes: 3

Shivprsad Sammbhare
Shivprsad Sammbhare

Reputation: 430

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>

Upvotes: 1

RacheleM
RacheleM

Reputation: 46

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.

Upvotes: 0

Related Questions