Overlays are floating labels that are meant to clarify, display additional context information, or help you to use specific content. You can also use them for analysing different chart types, infographics, tags or tiles (see overlays in use section).
As a general rule the position of an overlay is always relative to the mouse pointer. By default, the overlay should appear at the lower right corner of the cursor. If the available space can't accommodate the overlay, it should appear on the left. The same principle applies to the top corners. In special use cases, the position of the overlay can also be relative to the overlay-connected element you hover over.
It may be necessary to include interactive elements such as links or buttons. If this is the case, overlays should remain pinned to be able to use these elements. Normal overlays will always change to interactive overlays if used on touch.
Behavior & corner cases
Overlays appear on hover, focus, tap or click. They disappear on hover out, lost focus, tap, or click. As a general rule, only one overlay can be visible at a time. There may be exceptions for special use cases e.g. heat fields.
To use the interactive elements it's necessary to pin overlays. This can be triggered either by click, focus, or tap. Pinning can be released by click, lost focus, or tap.
To avoid that the overlay pops up when you pass triggering elements, the overlay should have a small delay of 100ms. The fade-in and fade-out animation should both last 150ms.
As a general rule overlays should behave responsively. Overlays should always fit the available screensize and the content should reflow accordingly. When in doubt please contact an UX Teammember.
Do's and don'ts
Regular overlays should not:
- contain any interactive elements like links, buttons, drop-downs, scrollbars etc.
- influence the mouse cursor (e.g. use "hand" cursor instead of normal pointer)
Interactive overlays should not:
- contain scrollbars, drop-downs, expandable sections, tabs etc.
- be used together with components where clicking and tapping is already reserved for other interactions (e.g. click to pin hairline within a chart), because in this case it's not possible to pin the interactive overlay.
Overlays in use
Overlays only appear in combination with other components. Here are some examples.
The information visible in the table overlay can also be found within an expanded table row. The information belonging to the hovered column will be highlighted within the overlay.
The content in overlays can vary depending on the usage. Please use our Angular components as content elements.
Overlays can also contain tables. Table rows in overlays have a height of 28px.