Я использую окно реакции и пытаюсь показать всплывающую подсказку при наведении курсора на каждую строку. Но всплывающая подсказка отображается в окне из-за автоматического переполнения. вот пример реализации.
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"));
Любая идея будет очень полезна. Спасибо :)
Опция positionStrategy
в всплывающей подсказке должна выполнить эту работу. Вы можете найти его в документации здесь https://react-tooltip.com/docs/options
Однако я заметил, что свойство will-transform
в элементе .List
из плагина react-window
вызывало проблемы, и мне пришлось установить для него значение auto
, чтобы оно заработало. Убедитесь, что это изменение не вызывает каких-либо серьезных проблем (хотя этого не должно быть).
Я развил вашу песочницу и заставил ее работать. Посмотреть можно здесь.