popup - Material design solution for popovers

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

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.