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?
We can use the following approach in ReactJS to use the react-bootstrap Tooltip Component. Tooltip Props: arrowProps: It is used to position the tooltip arrow. id: It is just an HTML id attribute that is necessary for accessibility.
Tooltips display informative text when users hover over, focus on, or tap an element.
React Overlays is a toolkit for creating functional overlays, tooltips, modals, and dropdowns. It is not a UI framework but is meant to be incorporated into frameworks. To make those integrations possible, React Overlays is style-agnostic and does not come with any CSS.
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With