💡 Add tooltip to cell rows

[McPatto]

💡 Add tooltip to row cells

• what edition are you using - community
• version for @inovua/reactdatagrid-community - "^5.10.2"

Relevant code or config

export const BaseCellRender = (value: string) => (
  <Tooltip
    buttonSize="lg"
    placement="top"
    title={value}
    buttonClass="z-50"
  >
    <span>{value}</span>
  </Tooltip>
);

What you did: I am trying to display a Tooltip when hovering a custom cell. This Tooltip is made with a Popover from @headlessui/react

What happened: Tooltip is not displayed.

Problem description: I realized that this is because my tooltip has a position: absolute, and somehow the rows below where my tooltip displays are on top of it, hiding my tooltip. Even I use a z-index: 1000000, this component don't show on top Besides

Suggested solution: I guess this has to do because you are rendering a custom cell inside a div and that div inside another div. It would really help that my content would be in the same index as other cells.

Demo:

https://github.com/inovua/reactdatagrid/assets/43398227/d6033fa3-f46b-44e6-ad0a-bd8cd1f3583c