Material Ui Tooltip 组件问题？答案

【问题标题】：Material Ui Tooltip components issue?Material Ui Tooltip 组件问题？
【发布时间】：2022-01-10 11:16:42
【问题描述】：

我在我的项目中使用材质 ui。但是我有一个在滚动开始时隐藏工具提示的功能？任何人都可以提出任何建议。谢谢。。

<Tooltip title="Need to hide when page is scrolling" followCursor>
  <Box>
    Button Groups
  </Box>
</Tooltip>

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

你为什么不用开放状态来控制它？

import * as React from 'react';
    import Grid from '@mui/material/Grid';
    import Button from '@mui/material/Button';
    import Tooltip from '@mui/material/Tooltip';
    import ClickAwayListener from '@mui/material/ClickAwayListener';
    
    export default function TriggersTooltips() {
      const [open, setOpen] = React.useState(false);
    
      const handleTooltipClose = () => {
        setOpen(false);
      };
    
      const handleTooltipOpen = () => {
        setOpen(true);
      };
    
      return (
        <div>
          <Grid container justifyContent="center">
            <Grid item>
              <ClickAwayListener onClickAway={handleTooltipClose}>
                <div>
                  <Tooltip
                    PopperProps={{
                      disablePortal: true,
                    }}
                    onClose={handleTooltipClose}
                    open={open}
                    disableFocusListener
                    disableHoverListener
                    disableTouchListener
                    title="Add"
                  >
                    <Button onClick={handleTooltipOpen}>Click</Button>
                  </Tooltip>
                </div>
              </ClickAwayListener>
            </Grid>
          </Grid>
        </div>
      );
    }

【讨论】：

我问我想通过onClick 事件打开工具提示。我的问题是它不应该在页面滚动时打开。我的意思是当页面滚动时工具提示应该隐藏！

【解决方案2】：

您可以按照@Samira 的建议做类似的事情，但改为听onScroll 事件。

onScroll={() => {
  if (open) {
    setOpen(false);
  }
}}

这可能有点棘手，因为滚动事件比徒手捕捉麻雀更难?

在sandbox example 中，我必须明确设置overflow 和height 才能触发此事件。我注意到onWheel 事件不需要这些样式，但是它不会在使用键盘滚动时触发。

编辑

如果要在整个页面滚动上隐藏工具提示，可以将事件处理程序移动到document元素：

React.useEffect(() => {
    document.addEventListener("scroll", () => {
        setOpen(false);
    });
  }, []);

different sandbox 展示了它的工作原理。

【讨论】：

但是我需要在整页或正文滚动时隐藏，那我应该在哪里调用onScroll事件？
这实际上更简单，不需要特殊的样式。我已经更新了答案，以说明如何处理该案例。
您是否看到它实际上不适用于您的沙盒
这很奇怪，现在我确实看到了你报告的内容。但这是一个简单的修复，更新了沙箱和答案。如果它已经是false，只是想优化一点而不更新状态，但似乎在文档事件中它没有将其视为true，尽管工具提示显示在滚动之前。