工具提示在滚动时不会消失

Question

我在网站上有一个按钮和一个工具提示，它描述了按钮的操作。

但是有一个我无法解决的错误（我已经开始怀疑是否有解决这个问题的方法）。

问题描述：当用户将鼠标悬停在图标上时，会出现一个工具提示——这里一切正常。但如果此时表格正在滚动，则工具提示会飞出边界。很难形容，看看

注意滚动时工具提示（如果光标悬停在上面）如何向上或向下飞行。

告诉我如何解决这个问题？

          <div>
            <Tooltip 
              title="Delete" 
              arrow
              componentsProps={{
                tooltip: {
                    sx: {
                        bgcolor: '#a3a3a3',
                        '& .MuiTooltip-arrow': {
                            color: '#a3a3a3',
                        },
                    },
                  },
                }}
                PopperProps={{
                    modifiers: [
                        {
                            name: "offset",
                            options: {
                                offset: [0, -8],
                            },
                        },
                    ],
                }}>
              <DeleteForeverIcon/>
            </Tooltip>
          </div>

说明：将鼠标悬停在第一列的任何单元格上，等待工具提示出现。然后向上或向下滚动滚轮，查看工具提示如何移出表格

附：请注意，这个问题已经得到解答。原则上，这个解决方案是有效的。但是在将这个解决方案添加到我的真实代码中时，我遇到了很多问题。对我来说，一个简单的解决方案可能是在将鼠标悬停在按钮上时简单地取消滚动。告诉我如何做到这一点（但请记住 position: fixed 在这种情况下不适合）

Answer 1

我的方法不同，每个工具提示都保持自己的状态。它使用IntersectionObserver 来确定@​​987654325@ 组件是否可见。当组件不再可见时，它将隐藏Popper（工具提示弹出窗口），方法是通过PopperProps 上的sx 属性将CSS 设置为display: 'none'。

代码沙盒示例：Here

这是修改后的文件FileDownloadButton.jsx：

import React from "react";
import FileDownloadIcon from "@mui/icons-material/FileDownload";
import { ButtonGroup, Tooltip } from "@mui/material";

export default function FileDownloadButton() {
  const tipRef = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  const cb = (entries) => {
    const [entry] = entries;
    entry.isIntersecting ? setInView(true) : setInView(false);
  };

  React.useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px"
    };
    const ref = tipRef.current;
    const observer = new IntersectionObserver(cb, options);

    if (ref) observer.observe(ref);

    return () => {
      if (ref) observer.unobserve(ref);
    };
  }, [tipRef]);

  return (
    <ButtonGroup>
      <div>
        <Tooltip
          ref={tipRef}
          title="Download record "
          arrow
          componentsProps={{
            tooltip: {
              sx: {
                bgcolor: "#a3a3a3",
                "& .MuiTooltip-arrow": {
                  color: "#a3a3a3"
                }
              }
            }
          }}
          PopperProps={{
            sx: { display: inView ? "block" : "none" },
            modifiers: [
              {
                name: "offset",
                options: {
                  offset: [0, -8]
                }
              }
            ]
          }}
        >
          <FileDownloadIcon />
        </Tooltip>
      </div>
    </ButtonGroup>
  );
}

---

更改以供参考

变化 1

export default function FileDownloadButton() {
  const tipRef = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  const cb = (entries) => {
    const [entry] = entries;
    entry.isIntersecting ? setInView(true) : setInView(false);
  };

  React.useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px"
    };
    const ref = tipRef.current;
    const observer = new IntersectionObserver(cb, options);

    if (ref) observer.observe(ref);

    return () => {
      if (ref) observer.unobserve(ref);
    };
  }, [tipRef]);

变化 2

PopperProps={{
    sx: { display: inView ? "block" : "none" },

---

更新 1

原始海报想要切换

Codesandbox example

import React, { useState } from "react";
import FileDownloadIcon from "@mui/icons-material/FileDownload";
import { ButtonGroup, IconButton, Tooltip } from "@mui/material";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import VisibilityIcon from "@mui/icons-material/Visibility";

export default function FileDownloadButton() {
  const [click, setClick] = useState(true);

  const tipRef = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  const cb = (entries) => {
    const [entry] = entries;
    entry.isIntersecting ? setInView(true) : setInView(false);
  };

  React.useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px"
    };
    const ref = tipRef.current;
    const observer = new IntersectionObserver(cb, options);

    if (ref) observer.observe(ref);

    return () => {
      if (ref) observer.unobserve(ref);
    };
  }, [tipRef]);

  return (
    <ButtonGroup>
      <div>
        <Tooltip
          ref={tipRef}
          title={click ? "Show item" : "Hide Item"}
          arrow
          componentsProps={{
            tooltip: {
              sx: {
                bgcolor: "#a3a3a3",
                "& .MuiTooltip-arrow": {
                  color: "#a3a3a3"
                }
              }
            }
          }}
          PopperProps={{
            sx: { display: inView ? "block" : "none" },
            modifiers: [
              {
                name: "offset",
                options: {
                  offset: [0, -8]
                }
              }
            ]
          }}
        >
          <IconButton onClick={() => setClick(!click)}>
            {click ? <VisibilityOffIcon /> : <VisibilityIcon />}
          </IconButton>
        </Tooltip>
      </div>
    </ButtonGroup>
  );
}

Answer 2

我认为这是浏览器特定的问题。当我在 Firefox 浏览器中检查给定的 url（https://codesandbox.io/s/silly-grass-1lb3qw）时，它工作正常（但不是在 chrome 中）。后来发现，与最新版本以来的其他浏览器相比，滚动元素时悬停在 chrome 中的工作方式不同。

我进行了以下更改以使其在 chrome 中工作。基本上，每当我们悬停任何项目时，都会将材料工具提示添加到文档中。所以我所做的是我附加了一个滚动事件，如果存在任何材料工具提示元素，我只是简单地删除它。

DeviceTable.jsx

export default function DevicesTable() {
  const tableRef = useRef();

  function removeElementsByClass(className){
     const elements = document.getElementsByClassName(className);
     while(elements.length > 0){
       elements[0].remove();
     }

  }

  useEffect(() => {
     if (tableRef.current) {
       tableRef.current.addEventListener("scroll", (e) => {
          // CLASS NAME OF THE TOOLTIP ATTACHED TO THE DOM. THERE ARE MULTIPLE CLASSES BUT I FOUND FOLLOWING CLASSNAME TO BE UNIQUE. PLEASE CROSS CHECK FROM YOUR END AS WELL.
          //YOU CAN CHECK THIS BY PASSING open={true} attribute on <Tooltip> AND INSPECT DOM
         removeElementsByClass("css-yk351k-MuiTooltip-tooltip")
       });
     }
     return () => {
       if(tableRef.current) {
          tableRef.current.removeEventListener("scroll", ()=>{});
       }
     }
  }, []);

return (
  <TableContainer  className="TableContainerGridStyle">
    <Table className="TableStyle">
      <DevicesTableHeader />
      // CHANGED LINE
      <TableBody ref={tableRef} className="TableBodyStyle">
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        <DevicesTableCell />
        </TableBody>
    </Table>
  </TableContainer>
 );
}

除了上述之外，我认为您可以使用其他替代方法，例如 followCursor，将位置相对属性设置为表格单元格（TableCellStyle）或正文。但这些并不能完全解决问题。

当您将 Table 组件作为 props 子组件传递给 StateLabel 组件时，为了显示/渲染，我们需要更新 StateLabel 组件以使用 props.children

export default function StateLabel({children}) {
  return <div>{children}</div>;
}

Div hover not working when scrolling in chrome