Mantine Tooltip をスクロール時に閉じる

問題

mantineのtooltipはスクロール時には閉じてくれません。

解決方法

use-window-scrollを用いて自作します。
また、setOpenedも手動で更新するため、コンポーネント外をタップした場合に閉じる処理もuse-click-outsideを用いて実装します。

コード

import React, { useEffect, useState } from "react";
import { Tooltip as MantineTooltip } from "@mantine/core";
import { useClickOutside, useWindowScroll } from "@mantine/hooks"

type Props = {
  label: string;
  children: React.ReactNode;
};

export const Tooltip = ({ label, children }: Props) => {
  const [opened, setOpened] = useState(false);
  const onClick = () => setOpened(!opened);
  const closeTooltip = () => setOpened(false);

  // 外側をクリックしたら閉じる
  const ref = useClickOutside(closeTooltip);

  // scroll時に閉じる
  const [scroll] = useWindowScroll();
  useEffect(() => closeTooltip, [scroll]);

  return (
    <MantineTooltip
      opened={opened}
      ref={ref}
      label={label}
　　　　　　　　　　　// タップ時にも表示する
      events={{ hover: true, focus: false, touch: true }}
    >
      // インラインで使用したいのでspan
      <span onClick={onClick}>{children}</span>
    </MantineTooltip>
  );
};

参考

• use-window-scroll
• use-click-outside