При падении на всплеск инструментов наложение неправильно рассчитывает положение относительно подъема инструментов ⇐ CSS

[Anonymous]

В настоящее время, когда значок информации падается, наложение неожиданно появляется вне страницы внизу (можно увидеть, прокручивая вниз на странице). Я хочу, чтобы наложение отображалось в местоположении значка информации.

Код: Выделить всё

import React, { useState, useRef, useEffect } from "react";
import { OverlayTrigger, Popover, Row } from "react-bootstrap";
import { Placement } from "react-bootstrap/esm/types";

type Props = {
children: JSX.Element;
header?: string;
content?: string | JSX.Element;
controlledShow?: boolean;
hover?: boolean;
position?: Placement;
wide?: boolean;
customTransform?: string;
};

export const TheOverlayTrigger: React.FC
 = ({
children,
header,
content,
controlledShow,
hover,
position = "top",
wide,
customTransform,
}) => {
const [show, setShow] = useState(false);
const popoverRef = useRef(null);

useEffect(() => {
if (show && popoverRef.current) {
const popperInstance = (popoverRef.current as any).popper;
if (popperInstance) {
popperInstance.scheduleUpdate();
}
}
}, [show]);

return (
 setShow(nextShow)}
popperConfig={{
modifiers: [
{
name: "customTransform",
enabled: true,
phase: "write",
fn: ({ state }) => {
if (state.styles.popper && customTransform) {
state.styles.popper.transform = customTransform;
}
},
},
],
}}
overlay={
 setShow(true)}
onMouseLeave={() => setShow(false)}
>

{header && {header}}
{content}


}
>
{children}

);
};
< /code>
tooltip.tsx:
import React, { useRef, useEffect, useState } from "react";
import { TheOverlayTrigger } from "./TheOverlayTrigger";
import { InfoCircle } from "react-bootstrap-icons";

type Props = {
header?: string;
content?: string | JSX.Element;
};

export const Tooltip: React.FC
 = ({ header, content }) => {
const iconRef = useRef(null);
const [iconPosition, setIconPosition] = useState({
top: 0,
left: 0,
});

useEffect(() => {
const updateIconPosition = () => {
if (iconRef.current) {
const rect = iconRef.current.getBoundingClientRect();
setIconPosition({
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
});
}
};

updateIconPosition();
window.addEventListener("resize", updateIconPosition);
window.addEventListener("scroll", updateIconPosition);

return () => {
window.removeEventListener("resize", updateIconPosition);
window.removeEventListener("scroll", updateIconPosition);
};
}, []);

return (





);
};

Ссылка на песочницу: https://codesandbox.io/p/sandbox/react- ... d-5zs5h8h8
образно Поймите, что наложение появится в правильной позиции, если в TheoverLaytrigger.tsx «CustomTransform» установлен из «true» в «false». Тем не менее, в моей реальной кодовой базе Popper есть странные проблемы, вычисляющие позицию с использованием преобразования: преобразовать в TheoverLaytrigger.tsx. Вместо использования Popper в overlaytrigger.tsx, возможно ли внести изменения кода только на tooltip.tsx, чтобы позиционировать наложение в позиции значка? исправить это было бы очень оценено.

Подробнее здесь: https://stackoverflow.com/questions/793 ... relative-t