Popover（弹出框）

Popover 组件可用于在另一内容之上显示某些内容。

使用 Popover 组件时需要了解的事项

此组件构建于 Modal 组件之上。
与 Popper 组件不同，滚动和点击外部区域会被阻止。

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>

按 Enter 键开始编辑

Anchor 游乐场

使用单选按钮调整 anchorOrigin 和 transformOrigin 位置。您还可以将 anchorReference 设置为 anchorPosition 或 anchorEl。当设置为 anchorPosition 时，组件将引用 anchorPosition 属性而不是 anchorEl，您可以调整此属性来设置 popover 的位置。

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

鼠标悬停互动

此演示展示了如何使用 Popover 组件和 mouseenter 及 mouseleave 事件来实现 popover 行为。

鼠标悬停显示 Popover。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

有关虚拟元素属性的更多信息，请参阅以下资源