Reactjs 材质UI工具提示未显示在正确的位置

我有一个react JS项目，它使用调度器和material UI包

（实际上，上面有许多代码用于获取所有者id等，我不知道是否也需要添加）

以下是计划程序代码：

 <Schedular
            ownerID={ownerID}
            schedules={schedules} 
            scheduleTimezone={scheduleTimezone} 
            scheduleId={scheduleId} 
            timezone={scheduleTimezone}
            scheduleName={pageTitle} 
            ref={tableContainerRef}
            setCurrentSchedule={setCurrentSchedule}
            currentSchedule={currentSchedule}
            handlePrevious={handlePreviousButton}
            weekStart={weekStart}
            setWeekStart={setWeekStart}
            generatedJson={json}
            schedulerHeader={screenHeader}
            setUpdateSettingsIsSnackBarShown={setUpdateSettingsIsSnackBarShown}
            additionalControls={[
              {
                icon: RestoreOutlinedIcon,
                type: "materialSVG",
                onClick: () => {
                  setCurrentSchedule(lastSavedSchedule);
                },
                title: "Reset",
                alt: "reset",
                isDisabled: isFormUpdated,
              },
              {
                icon: SaveOutlinedIcon,
                onClick: handleSaveButton,
                type: "materialSVG",
                title: isCreatedSnackBarShown
                  ? "Saved"
                  : isEditedSnackBarShown
                  ? "Updated"
                  : isUpdatedSettingsSnackBarShown
                  ? "Settings updated"
                  : "Save",
                alt: "save",
                isDisabled: isFormUpdated,
                isLoading:
                  createScheduleState === actionStatus.fetching ||
                  updateScheduleState === actionStatus.fetching,
                showTooltip:
                  isCreatedSnackBarShown ||
                  isEditedSnackBarShown ||
                  isUpdatedSettingsSnackBarShown,
              },
              {
                icon: CloseOutlined,
                onClick: () => {
                  setIsClosingSchedule(true);
                  handlePreviousButton(() => {
                    resetState();
                    closeDrawer();
                    setPageTitle(screens[0].pageTitle);
                    setScheduleName("");
                  });
                },
                type: "materialSVG",
                title: "Close",
                alt: "close",
              },
            ]}
          />

{
setCurrentSchedule（lastSavedSchedule）；
},
标题：“重置”，
alt:“重置”，
isDisabled:IsFormUpdate，
},
{
图标：SaveOutlinedIcon，
onClick:handleSaveButton，
类型：“materialSVG”，
标题：isCreatedSnackBarShown
？“已保存”
：IsEditedNackBarshown
？“更新”
：IsUpdatedSettingsNackBarshown
？“设置已更新”
：“保存”，
alt:“保存”，
isDisabled:IsFormUpdate，
卸载：
createScheduleState===actionStatus.fetching||
updateScheduleState===actionStatus.fetching，
显示工具提示：
IsCreatedNackBarshown||
isEditedSnackBarShown||
IsUpdatedSettingsNackBarshown，
},
{
图标：闭合轮廓，
onClick:（）=>{
setIsClosingSchedule（真）；
handlePreviousButton（（）=>{
重置状态（）；
抽屉（）；
setPageTitle（屏幕[0].pageTitle）；
setScheduleName（“”）；
});
},
类型：“materialSVG”，
标题：“结束”，
alt:“关闭”，
},
]}
/>

但正如你在这里看到的：

我的光标实际上是在X图标，它也发生在下面的快餐店

编辑 我有来自iconButton.js的代码

    <Tooltip title={title} open={showTooltip ? true : undefined}>
      <IconButton
        size="medium"
        isActive={isActive}
        isDisabled={isDisabled || isLoading}
        onClick={() => {
          if (!isDisabled && !isLoading) onClick();
        }}
        className={`icon-btn ${isActive && "icon-btn-active"}`}
      >
        <Box
          display="flex"
          width={24}
          height={24}
          alignItems="center"
          justifyContent="center"
        >
          {handleImage()}
        </Box>
      </IconButton>
    </Tooltip>

{
如果（！isDisabled&！isLoading）onClick（）；
}}
className={`icon btn${isActive&&“icon btn active”}`}
>
{handleImage（）}

---

内部IconButton.jsx

function IconButtonBase({
    onClick,
    title,
    isActive = false,
    isDisabled = false,
    isLoading = false,
    showTooltip = false,
  }) {
    const iconColor = isDisabled ? "#cacaca" : isActive ? "#f65e02" : "#2d2d61";
  
    return (
      <Tooltip title={title} open={showTooltip ? true : undefined}>
        <IconButton
          size="medium"
          isActive={isActive}
          isDisabled={isDisabled || isLoading}
          onClick={() => {
            if (!isDisabled && !isLoading) onClick();
          }}
          className={`icon-btn ${isActive && "icon-btn-active"}`}
        >
          <Box
            display="flex"
            width={24}
            height={24}
            alignItems="center"
            justifyContent="center"
          >
            {handleImage()}
          </Box>
        </IconButton>
      </Tooltip>
    );
  }
  
  export { IconButtonBase as IconButton };

函数IconButtonBase({
onClick，
标题
isActive=false，
isDisabled=false，
isLoading=false，
showTooltip=false，
}) {
const iconColor=isDisabled？#cacaca:isActive？#f65e02:“#2d2d61”；
返回(
{
如果（！isDisabled&！isLoading）onClick（）；
}}
className={`icon btn${isActive&&“icon btn active”}`}
>
{handleImage（）}
);
}
导出{IconButtonBase为IconButton}；

可能是页面空间不足，无法在顶部位置显示工具提示 只需像这样添加简单的填充，然后重试

<div style={{padding: '50px'}}>
  <Tooltip placement="top" title="Chart Type">
    <IconButton >
      <ShowChart />
    </IconButton>
  </Tooltip>
  </div>

请添加您的工具提示组件实现您的意思是在计划中？也许我不了解scheduler，但我认为它使用了material UI我的意思是，您在哪里实现了material UI工具提示组件IDE IconButtonnope，已经尝试过了