Поппер-Реакция покидает границы контейнера

Question

Я установил простой пример, где это происходит, обратите внимание, как всплывающая подсказка получает translate3d(-45px, 147px, 0px), которая отображает ее за пределами окна:

https://codesandbox.io/s/stupefied-blackwell-nll6m

Answer 1

Есть некоторые ошибки, вызванные конфигурацией, которую вы используете.
Учтите следующее:

<Popper
  placement="bottom"
  modifiers={{
    preventOverflow: {
      escapeWithReference: false
    }
  }}
>
  {({ ref, style, outOfBoundaries }) => {
    return (
      <div>
       <div
         className="tooltip"
         style={{ opacity: outOfBoundaries ? 0 : 1, ...style }}
         ref={ref}
       >
       Popper
       </div>
      </div>
    );
  }}
</Popper>

Как вы можете видеть, я внес несколько изменений, которые исправили проблему, но мне пришлось убрать стрелку, потому что она вызывала ошибки и для этой новой конфигурации.
Пока это исправлено, но вы можете найти способ включить стрелку.