Как переопределить автоматическое переполнение, чтобы всплывающая подсказка отображалась вне сетки

Я использую окно реакции и пытаюсь показать всплывающую подсказку при наведении курсора на каждую строку. Но всплывающая подсказка отображается в окне из-за автоматического переполнения. вот пример реализации.

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

Любая идея будет очень полезна. Спасибо :)

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Опция positionStrategy в всплывающей подсказке должна выполнить эту работу. Вы можете найти его в документации здесь https://react-tooltip.com/docs/options

Однако я заметил, что свойство will-transform в элементе .List из плагина react-window вызывало проблемы, и мне пришлось установить для него значение auto, чтобы оно заработало. Убедитесь, что это изменение не вызывает каких-либо серьезных проблем (хотя этого не должно быть).

Я развил вашу песочницу и заставил ее работать. Посмотреть можно здесь.

Другие вопросы по теме