Popover

Popoverを使用すると、一部のコンテンツを別のコンテンツの上に表示できます。

Popover コンポーネントを使用する際の注意事項：

コンポーネントは、 Modal コンポーネントの上に構築されます。
Popper コンポーネントとは異なり、スクロールとクリックはブロックされます。

Simple Popover

Anchor playground

ラジオボタンを使用して、 anchorOrigin および transformOrigin 位置を調整します。 anchorReference を anchorPosition または anchorEl設定することもできます。 anchorPositionの場合、コンポーネントはanchorElの代わりにポップオーバーの位置を調整するanchorPosition >propを参照してください。 anchorReference を anchorPosition または anchorEl設定することもできます。 anchorPositionの場合、コンポーネントはanchorElの代わりにポップオーバーの位置を調整するanchorPosition >propを参照してください。 anchorReference を anchorPosition または anchorEl設定することもできます。 anchorPositionの場合、コンポーネントはanchorElの代わりにポップオーバーの位置を調整するanchorPosition >propを参照してください。 anchorReference を anchorPosition または anchorEl設定することもできます。 anchorPositionの場合、コンポーネントはanchorElの代わりにポップオーバーの位置を調整するanchorPosition >propを参照してください。 anchorReference を anchorPosition または anchorEl設定することもできます。 anchorPositionの場合、コンポーネントはanchorElの代わりにポップオーバーの位置を調整するanchorPosition >propを参照してください。

<Popover 
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
>
  The content of the Popover.
</Popover>

マウスオーバー操作

This demonstrates how to use the Popover component to implement a popover behavior based on the mouse over event.

Hover with a Popover.

補完プロジェクト

より高度な使用例では、以下を利用できます。

PopupState helper