如何覆盖溢出自动以在网格外显示工具提示

Question

我正在使用react-window并尝试在悬停每一行时显示工具提示。但由于自动溢出，工具提示显示在窗口内。这是示例实现。

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"));

任何想法都会非常有帮助。谢谢:)

Answer 1

react-tooltip 的

positionStrategy

属性应该可以完成这项工作。您可以在此处的文档中找到它https://react-tooltip.com/docs/options

但是我注意到

will-transform

插件中

.List

元素上的

react-window

道具导致了问题，我必须将其设置为

auto

才能使其正常工作。确保此更改不会导致任何重大问题（尽管不应该）

我分叉了你的沙箱并使其工作。 你可以在这里查看。

如果对你有帮助，请点赞。 :)