Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Popover

Purpose: Popovers can be used when space is scarce i.e. within List GUI items, table cells or menus in the Header section. They offer either secondary information on object like a preview or rating to be displayed or entered. They display information about ongoing processes
Composition: Popovers consist of a layer displayed above all other content. The content of the Popover depends on the functionality it performs. A Popover MAY display a title above its content. All Popovers contain a pointer pointing from the Popover to the Triggerer of the Popover.
Effect: Popovers are shown by clicking a Triggerer component such as a Button or Glyph. The position of the Popover is calculated automatically be default. However, it is possible to specify if the popover appears horizontal (left, right) or vertical (top, bottom) relative to its Triggerer component. Popovers disappear by clicking anywhere outside the Popover or by pressing the ESC key.

Usage

Popovers MUST NOT contain horizontal scrollbars.
Popovers MAY contain vertical scrollbars. The content component is responsible to define its own height and show vertical scrollbars.
If Popovers are used to present secondary information of an object, they SHOULD display a title representing the object.

Interaction

A Popover MUST only be displayed if the Trigger component is clicked. This behaviour is different from Tooltips that appear on hovering. Popovers disappear by clicking anywhere outside the Popover or by pressing the ESC key.

Style

Accessibility

There MUST be a way to open the Popover by only using the keyboard.
The focus MUST be inside the Popover, once it is open if it contains at least one interactive item. Otherwise the focus MUST remain on the Triggerer component.
The focus MUST NOT leave the Popover for as long as it is open.
There MUST be a way to reach every control in the Popover by only using the keyboard.
The Popover MUST be closable by pressing the ESC key.
Once the Popover is closed, the focus MUST return to the element triggering the opening of the Popover or the element being clicked if the Popover was closed on click.

Parents

Descendants