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 鍵開始編輯

錨點遊樂場

使用單選按鈕調整 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.

有關虛擬元素屬性的更多資訊，請參閱以下資源