Popouts

A popout (or popover) is a view that appears above other content onscreen when you click a control or view. For example, an information button may display extra information in a popout when you click on it. Typically, a popout includes an arrow pointing to the location from which it emerged. Both popout and popup need additional DOM structures and styling — e.g. boxes, frames, lists and buttons. They just provide a basic container that can be positioned with several modifiers (--n, --e, --s, --w etc.). A popout is invisible at first, but can be activated via {popout}-opener:hover or .is-active status.

Source Code

To initialize the messages on this site we used this piece of less.

Default popout

This is a standard popout.

Popout positions

Example positioning: left (--w) and right (--e).

Variable content

You can use any other element in a popout.