javascript - ツールチップ付きの React ブートストラップ テーブル

Question

反応ブートストラップ テーブルを使用して、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。これは、表示されている価格の上にツールチップとして表示したいと考えています。どうやってやるの？

Answer 1

ツールチップ コンポーネントを BootstrapTable の外に設定します。TableHeaderColumn の columnClassName 属性を使用して、テザーを使用してツールチップをアタッチできるクラスを価格セルに与えます。