Popover

import React, { useState } from 'react';
import CommentIcon from '@mui/icons-material/Comment';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import { Button, Box } from '@mui/material';

const CommentIconWithPopover: React.FC = () => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  return (
    <Box
      display="flex"
      justifyContent="center"
      alignItems="center"
      height="100vh"
    >
      <Button
        onMouseEnter={handlePopoverOpen}
        onMouseLeave={handlePopoverClose}
      >
        <CommentIcon />
      </Button>
      <Popover
        id="mouse-over-popover"
        sx={{
          pointerEvents: 'none',
        }}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        onClose={handlePopoverClose}
        disableRestoreFocus
      >
        <Typography sx={{ p: 1 }}>テキストを表示します</Typography>
      </Popover>
    </Box>
  );
};

export default CommentIconWithPopover;

• id: id="mouse-over-popover"

このidプロパティは、このPopoverコンポーネントの一意の識別子です。他の要素と区別するために使用されます。

• sx: sx={{ pointerEvents: 'none' }}

sxプロパティは、MUIコンポーネントにスタイルを追加するためのプロパティです。ここでは、pointerEvents: 'none'が設定されており、これによりPopoverがマウスイベント（クリック、ホバーなど）を受け付けないようにしています。

• open: open={open}

openプロパティは、Popoverが表示されるかどうかを制御します。trueの場合、Popoverは表示され、falseの場合は非表示になります。

• anchorEl: anchorEl={anchorEl}

anchorElプロパティは、Popoverのアンカー要素（基準となる要素）を指定します。Popoverはこの要素に基づいて位置が決まります。ここでは、CommentIconにカーソルがホバーされたときに設定される要素です。

• anchorOrigin: anchorOrigin={{ vertical: 'top', horizontal: 'left' }}

anchorOriginプロパティは、アンカー要素のどの部分を基準にしてPopoverを表示するかを指定します。ここでは、アンカー要素の上部(vertical: 'top')の左側(horizontal: 'left')を基準にPopoverが表示されます。

• transformOrigin: transformOrigin={{ vertical: 'bottom', horizontal: 'right' }}

transformOriginプロパティは、Popoverのどの部分を基準にして位置を調整するかを指定します。ここでは、Popoverの底部(vertical: 'bottom')の右側(horizontal: 'right')が基準となります。

• onClose: onClose={handlePopoverClose}

onCloseプロパティは、Popoverが閉じられるときに呼び出される関数を指定します。ここでは、handlePopoverClose関数が呼び出され、Popoverが閉じられます。

• disableRestoreFocus: disableRestoreFocus

disableRestoreFocusプロパティは、Popoverが閉じられたときにフォーカスを元の要素に戻さないようにします。通常、Popoverが閉じられると、フォーカスが元のアンカー要素に戻りますが、このプロパティを設定するとそれを無効にします。