Flyout

Readme

Flyout is a standalone pattern, but also forms the basis of many composite patterns such as infotip, combobox, & menu button.

Please read the documentation to understand how these examples were created.


Examples

Example 1: Click Activated

Any kind of HTML control can go inside of a flyout...

A link: www.ebay.com

A button:

An input:

A checkbox:


Example 2: Hover Activated (with Stealth Button)

Link

Any kind of HTML control can go inside of a flyout...

A link: www.ebay.com

A button:

An input:

A checkbox:


Example 3: Focus Activated (discouraged)

This pattern is discouraged because it forces a keyboard user to navigate through all interactive items of the flyout.

Any kind of HTML control can go inside of a flyout...

A link: www.ebay.com

A button:

An input:

A checkbox:


Example 4: Hover and Focus Activated (discouraged)

This pattern is discouraged because it forces a keyboard user to navigate through all interactive items of the flyout.

Link

Any kind of HTML control can go inside of a flyout...

A link: www.ebay.com

A button:

An input:

A checkbox:


Updated: March 24th, 2020