Material UI 工具提示未显示在正确的位置

Question

我有一个使用调度程序和材质 UI 包的 React JS 项目。

（上面其实有很多获取owner 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",
              },
            ]}
          />

但是正如你在这里看到的：

我的光标实际上是在 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>

在 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 };

Answer 1

可能是页面没有足够的空间在顶部位置显示工具提示 只需像这样添加简单的填充，然后再试一次。

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