--- title: Overlays description: Anchored popovers for confirmations, renames and small forms, dialogs, and menus on the Popover API. --- ## Popover Whatever a button asks or offers opens next to that button, not in the middle of the screen, so it stays tied to what was pressed. That covers a confirmation, a rename, a small form and a question that follows the action, such as asking to restart after a save: it opens from the Save button. On phones it's a bottom sheet. Keep a popover to one or two fields. A longer form is a view of its own, not a popover or a dialog stacked on the page. | Attribute or method | What it does | | --- | --- | | `show(anchor)` | Opens under `anchor`, or above it when there's more room there, lined up with the edge on the button's side of the screen. Without one it opens in the middle, which is only for something nothing on screen started | | `heading` | A heading. A confirmation that's only a question leaves it out, and the question is the message | | `confirm` | Makes it an `alertdialog`, for a question that needs an answer | | `close(value)` | Closes it; `returnValue` holds the value when it fires `close` | It's on the Popover API, in the top layer, so a scrolling parent never clips it. Esc or a click outside closes it, focus starts on the first action (put Cancel first, so Enter never confirms by accident) and goes back to the button afterward. It follows the button as the page scrolls, and it's a bottom sheet below 600px wide. ## Dialog

Lose the connection

Can't reach the server. Changes made since will be lost if this page is closed.

Keep waiting

Try again

Only for something nothing on screen started, that needs the whole screen's attention: a lost connection, an expired sign-in or an update that's ready. Anything a button starts is a [popover](#popover) instead. The button in the demo stands in for the app losing its connection. It's a native `