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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Keerthi
  • 21
  • 1
  • 10

1 Answers1

0

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

Igor Gonak
  • 2,050
  • 2
  • 10
  • 17
  • I want tooltip text to be the table column text . How can I implement that? – Keerthi Apr 04 '22 at 15:17
  • What do you mean? You want to have a tooltip for each column header? – Igor Gonak Apr 04 '22 at 15:33
  • yes. I want for each column data. – Keerthi Apr 04 '22 at 16:26
  • are you using a special library for the bootstrap table? it doesn't look like https://react-bootstrap.netlify.app/components/table/. Is it table-next? – Igor Gonak Apr 04 '22 at 18:34
  • yes I am using react-bootstrap-table-next – Keerthi Apr 06 '22 at 05:25
  • This is essential information, as table-next has completely differenct API than a default react-bootstrap table. I would not recommend to use table-next, as it is outdated. The last release is 4 years ago. It has outdated dependencies and it is not compatible with Bootstrap 5. You can look around for another table library. Personally I migrated from table-next to react-table, because it's headless and easy to use. It looks exactly like a bootstrap table. I can't provide any help on table-next as the API doesn't offer built-in tooltip on column functionality. – Igor Gonak Apr 06 '22 at 06:32