Javascript 工具提示组件未正确调整位置以响应脱离屏幕

我有一个

组件，定义如下。它由作为按钮的图像和工具提示组成。当光标悬停在按钮上时，将显示工具提示

//组件/BrowseViewButtonContainer.tsx
从“React”导入*作为React；
进口{
MouseEventHandler、useLayoutEffect、useRef、useState、，
}从"反应",；
从“../scripts/classnames”导入类名；
从“../styles/BrowseViewButtonContainer.module.css”导入*作为样式；
从“./按钮”导入按钮；
从“./Image”导入图像；
类型BrowseViewButtonContainerProps={
clickHandler:MouseEventHandler，
src:string，
alt:string，
工具提示：字符串，
isInView:boolean，
zIndexVal:号码，
};
常数BrowseViewButtonContainer=({
clickHandler、src、alt、工具提示、isInView、zIndexVal、，
}：BrowseViewButtonContainerProps）=>{
const[initIsOffscreen，setInitOffscreenState]=useState（false）；
const tooltipRef=useRef（null）；
useLayoutEffect（（）=>(
setInitOffscreenState（parseFloat（window.getComputedStyle（tooltipRef.current.getPropertyValue（'right'））<0）
)，[window.innerWidth]）；
const tooltipClasses=类名([
样式。工具提示，
InitIsofScreen？styles.edgeAdjusted:“”，
]);
返回(
{工具提示}
);
};
导出默认BrowseViewButtonContainer；

其样式为：

/*样式/BrowseViewButtonContainer.module.css*/
.查看容器{
左边距：1.75雷姆；
}
.查看btn{
显示器：flex；
填充：0；
背景色：透明；
边界：0；
光标：指针；
}
.查看img{
不透明度：.25；
}
.查看图像：悬停，
.view-img.active{
不透明度：1；
}
.工具提示{
位置：绝对位置；
/*z指数：5*/
页边顶部：1rem；
填充：计算（.5rem+1px）.75rem计算（.5rem-1px）.75rem；
颜色：白色；
字体大小：.875rem；
字体系列：var（--粗体字体系列）；
线高：1；
字母间距：.5px；
空白：nowrap；
文本转换：大写；
背景色：黑色；
转换：转换（计算（15px-50%），计算（-375rem-3px））；
可见性：隐藏；
光标：自动；
不透明度：0；
过渡：不透明度。15s线性；
}
。工具提示。边缘已调整{
右：5px；
转换：translateY（计算（-375rem-3px））；
}
.查看btn:悬停+工具提示{
能见度：可见；
不透明度：1；
}

和

组件只是带有一些默认属性和样式的常规

&

在我的网站中，每个页面的主要部分使用相同的

布局：

//组件/Main.tsx
从“React”导入*作为React；
从“react”导入{ReactElement，ReactNode}；
从“../styles/Main.module.css”导入*作为样式；
类型MainProps={
leftButtons？：反应元素[]，
rightButtons？：反应元素[]，
子节点：反应节点；
}
常量Main=（{leftButtons，rightButtons，children}:MainProps）=>(
{leftButtons}
{rightButtons}
{儿童}
);
Main.defaultProps={
左按钮：[]，
右按钮：[]，
儿童：''，
};
导出默认主；

其样式为：

/*样式/Main.module.css*/
梅因先生{
柔性生长：1；
}
.按钮栏{
显示器：flex；
对齐项目：居中；
保证金底部：2.25雷姆；
填料顶部：.75rem；
填充底部：.75rem；
边框顶部：3倍纯色颜色（--嬉皮蓝）；
}
.btn组{
显示器：flex；
}
.左btn组{
柔性生长：1；
}

对于我的

/browse

路线，

扩展

：

//pages/index.tsx
从“React”导入*作为React；
从“react Helmet”导入{Helmet}；
从“../components/BrowseMain”导入BrowseMain；
从“../components/Footer”导入页脚；
从“../components/Header”导入标题；
从“../styles/IndexPage.module.css”导入*作为样式；
常量索引页=（）=>(
...
);
导出默认索引扩展；

样式为

/*样式/IndexPage.module.css*/
.反应根{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
字体系列：var（--常规字体系列）；
线高：1.5；
字母间距：.3px；
文本对齐：左对齐；
背景色：白色；
}

//组件/BrowseMain.tsx
从“React”导入*作为React；
从“react”导入{useState}；
从“../images/icon grid view.svg”导入gridViewImg；
从“../images/icon list view.svg”导入listViewImg；
从“../styles/BrowseMain.module.css”导入*作为样式；
从“./BrowseViewButtonContainer”导入BrowseViewButtonContainer；
从“./按钮”导入按钮；
从“/Main”导入Main；
const BrowseMain=（）=>{
const[inListView，toggleListView]=useState（true）；
常量左按钮=[
过滤器，
];
常量右按钮=[
toggleListView（假）}
src={gridViewImg}
alt=“网格视图”
tooltip=“网格视图”
isInView={！inListView}
zIndexVal={1}
/>,
toggleListView（真）}
src={listViewImg}
alt=“列表视图”
tooltip=“列表视图”
isInView={inListView}
zIndexVal={2}
/>,
];
返回；
};
导出默认浏览器名；

其样式为：

/*样式/BrowseMain.module.css*/
.浏览过滤器btn{
宽度：100%；
}

全局样式：

/*/styles/globals.css*/
/*各种@font-face和变量声明*/
* {
框大小：边框框；
}
.集装箱{
右边填充：24px；
左侧填充：24px；
}

大多数情况下，工具提示都能完美工作。除了出现在相应按钮上方的悬停按钮上，他们还将计算其默认位置是否会离开屏幕，然后将其更正为留在屏幕内。应该是这样的：

然而，我也遇到了以下情况：

正如您所看到的，两个工具提示都触发了调整，而它们中只有一个应该这样做。这种情况发生在以下情况之一：

• 清空缓存后