'Add tooltips on column headers in a React Bootstrap table

<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?

reactjstooltipreact-bootstrapreact-bootstrap-table


Solution 1:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Igor Gonak

Related Questions