Add tooltips on column headers in a React Bootstrap table

Question

<BootstrapTable
bordered={false}
hover={true}
wrapperClasses="responsive"
keyField="id"
data={products}
columns={columns} 
{...props.baseProps}
//  ref={(n) => (this.node = n)}
pagination={paginationFactory(optionsPag)} />

I want to add the tooltip inside this table. How can I do?

Answer 1

You can do this with provided components Overlay, OverlayTrigger and Tooltip: https://react-bootstrap.netlify.app/components/overlays/

I have created a sandbox with a single table and two tooltips using OverlayTrigger - the first is triggered on hover, the second on click:https://codesandbox.io/s/react-bootstrap-template-forked-29by4e