Material Ui Tooltip components issue?-CodePudding

I am using material ui in my project. But I have a functionality to hide tooltip when scrolling starting? Can anyone give any suggestions. Thank you..

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

CodePudding user response：

Why don't you control it with an open State?

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

CodePudding user response：

You can do simlar to what @Samira suggested, but listen to the onScroll event instead.

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

This might be a bit tricky, as the scroll event is harder to catch than a sparrow with your bare hands