Material design solution for popovers

Question

Material design has no popovers, and I wonder what should be used as a replacement?

For example, how would you advise Product Hunt to replace their popover when they switch to material design?

Answer 1

Here's how...

See this dropdown effect for an example of how the Material Design physics can work for a popover. A similar schematic is:

The opacity fade, triangular callout indicator, and growth origin (top or center) are all valid options.

---

Here's why

Material Design guidelines don't specify popovers, but the specification of material properties provide a clear set of properties that can be used to create popups. The relevant material properties are:

• Material cannot occupy the same plane. But material can be stacked.
• Material can be created in a plane. See this video.
• Material can change shape. See this video.

So a popover sequence can be created with the following parameters:

1. Popover appears floating above the content. Make sure shadows are compliant. See this.
2. Popover is created in the plane over the content, as with this video.

The dropdown demo at the top is mostly compliant with this set of parameters.

Answer 2

It's possible the Material Design spec has changed since this question was asked more than a year ago.

Under the current spec, Product Hunt would need to replace their popover with a dialog. From the spec:

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Specifically the spec states that for list items (which is what Product Hunt would need to convert the content on this page to) you could use a simple dialog to provide details or actions about a list time from the spec:

Simple menus display options for list items, whereas simple dialogs can provide details or actions about a list item.

Here is an example similar to what Product Hunt would need: