Блог

Я пытаюсь создать компонент всплывающей подсказки в react таким образом, чтобы, когда он находится близко к боковой части экрана, он выравнивался с дочерним элементом. Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь получить размер окна (window.innerWidth и window.innerHeight) или положение компонента с помощью «getBoundingClientRect», они дают мне ширину / высоту и положение компонента относительно того, что выглядит как div вместо порта просмотра (см. прикрепленное изображение)

«getBoundingClientRect» дает мне позицию относительно размера средней секции. Предполагается, что моя всплывающая подсказка будет отображаться при наведении курсора мыши на «Наведите курсор сюда, чтобы увидеть всплывающую подсказку». В настоящее время говорится, что как верхний, так и левый значения равны 8px. В консоли я выводю результаты innerHeight, innerWidth и getBoundingClientRect компонента.

Это код, который я использую для позиции

 useEffect(() => {
   const { innerWidth, innerHeight } = window;
   const {
     top,
     bottom,
     right,
     left,
     width
   } = reference.current.getBoundingClientRect();
   if (position !== 'left' amp;amp; position !== 'right') {
     if (left <= 45 amp;amp; dataLength > width) {
       setLeftOffset(calculateOffset(width, 'left'));
     }

     if (top <= 45) {
       setPosition('bottom');
     }

     if (right >= innerWidth - 45 amp;amp; dataLength > width) {
       setLeftOffset(-calculateOffset(width, 'right'));
     }

     if (bottom >= innerHeight - 45) {
       setPosition('top');
     }
   }

   // If left or right, need an extra 5px offset
   if (position === 'left') setLeftOffset(5);

   if (position === 'right') setLeftOffset(-5);
 }, [window]);
  

Я просто неправильно понимаю окно просмотра? Что я могу сделать, чтобы получить фактическое положение компонента относительно экрана и фактический размер видимого содержимого? Любая помощь была бы с благодарностью принята!