Блог

Я пытаюсь использовать popper.js чтобы разместить компонент с правой стороны от наведенного элемента. По сути, я пытаюсь сделать так: при наведении курсора мыши на значок, размещенный в заголовке, я хочу, чтобы компонент обратной связи отображался справа от зависшего значка в совершенно другом div. Насколько я понимаю, и опорный элемент, и элемент поппера должны находиться в одном и том же файле, но как я могу заставить элемент поппера выскочить из опорного элемента и расположиться на одном и том же уровне по оси X, независимо от того, прокручиваю ли я вверх или вниз?

Это мой код компонентов

 import React, { useState } from "react";
import { SentryIcon } from "./SentryIcon";
import { usePopper } from "react-popper";
import { FeedbackCard } from "./FeedbackCard";
import { createPortal } from "react-dom";

//Vaviarnts are e.g. h1 h2 h3
export function Heading({
    children,
    bsClasses,
    info,
    variant,
    required,
    description
}) {
    const [show, setShow] = useState(false);
    const [referenceElement, setReferenceElement] = useState(null);
    const [popperElement, setPopperElement] = useState(null);
    const { styles, attributes } = usePopper(referenceElement, popperElement, {
        modifiers: [
            {
                name: "offset",
                options: {
                    offset: [10, 720]
                }
            },
            {
                name: "preventOverflow",
                options: {
                    mainAxis: false,
                    altAxis: false,

                    padding: 50
                }
            }
        ],
        placement: "right-end"
    });

    const DynamicHeading = `${variant}`;
    return (
        <div className="d-flex align-items-center">
            <div className="d-flex flex-column">
                <div className="d-flex">
                    <DynamicHeading className={`${bsClasses}`}>
                        {children}
                    </DynamicHeading>
                    {required amp;amp; (
                        <span
                            style={{ fontSize: "1.5rem" }}
                            className={`text-danger ${variant} mx-1 center`}
                        >
                            *
                        </span>
                    )}
                    {info amp;amp; (
                        <span
                            ref={setReferenceElement}
                            onMouseEnter={() => setShow(true)}
                            onMouseLeave={() => setShow(false)}
                        >
                            <SentryIcon
                                id={children}
                                icon="fas fa-info-circle"
                            />
                        </span>
                    )}
                </div>
                {description amp;amp; (
                    <p className="small text-muted minus-mt-small">
                        {description}
                    </p>
                )}
            </div>
            {show amp;amp; (
                <FeedbackCard
                    ref={setPopperElement}
                    style={styles.popper}
                    {...attributes.popper}
                    title={children}
                />
            )}
        </div>
    );
}
 

Ранее я позиционировал компонент карты обратной связи, передавая значение getBoundingClientRect() на карту и устанавливая ее верхнее значение, однако всякий раз, когда я прокручиваю карту, ее положение меняется. Все это находится где-то в середине окна 4200 пикселей.Высота прокрутки, возможно, вы знаете некоторые вычисления, которые можно выполнить, чтобы вычесть количество прокрутки относительно последней позиции на оси Y страницы, которые можно использовать вместе с getBoundingClientRects().top, чтобы элемент всегда оставался на одном и том же уровне Y?

Большое спасибо.