How to override overflow auto to show tooltip outside the grid

I'm using react-window and try to show tooltip on hover each row. But the tooltip shows within the window, because of overflow auto. here is sample implementation.

https://codesandbox.io/p/sandbox/dazzling-diffie-sncxsf?file=%2Findex.js%3A1%2C1-44%2C1

import React from "react";
import ReactDOM from "react-dom";
import { VariableSizeList as List } from "react-window";
import { Tooltip } from "react-tooltip";

import "./styles.css";
import "react-tooltip/dist/react-tooltip.css";

// These row heights are arbitrary.
// Yours should be based on the content of the row.
const rowSizes = new Array(1000)
  .fill(true)
  .map(() => 25 + Math.round(Math.random() * 50));

const getItemSize = (index) => rowSizes[index];

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    <a id="clickable">Row {index}</a>
    <Tooltip anchorSelect="#clickable" clickable>
      <span style={{ width: "100px" }}>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. In accusantium
        suscipit, facere reiciendis aliquam modi officiis aspernatur, eius
        doloremque dolor rerum atque quaerat quia quas deserunt possimus, dicta
        iure culpa.
      </span>
    </Tooltip>
  </div>
);

const Example = () => (
  <List
    className="List"
    height={150}
    itemCount={1000}
    itemSize={getItemSize}
    width={300}
  >
    {Row}
  </List>
);

ReactDOM.render(<Example />, document.getElementById("root"));

Any idea would be really helpful. Thanks :)

The positionStrategy prop of react-tooltip should do the job. You can find it in the docs here https://react-tooltip.com/docs/options

However I noticed that the will-transform prop on the .List element from the react-window plugin was causing issues and I had to set it to auto to make it work. Ensure that this change doesn't cause any major issues (though it shouldn't)

I forked your sandbox and made it work. You can look at it here.