Overlays

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).

Overlay example

Styleguide

Overlay basic styles

Measurements

x: 16px
y: 12px
z: 8 px

Line

line: 1px dotted
color: $gray-300
min-width: 20px

Box

border: 1px solid $turquoise-600 //inside
border-radius: 4px
background-color: #ffffff
max-width: 580px
min-width: appropriate to content
max-height: appropriate to content
min-height: appropriate to content

Label

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500

Entity name, value

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
Long entity names or links can be abbreviated with three dots

Placement

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.

Overlay placement
Overlay is positioned at the cursor's lower right corner.
Overlay placement
Overlay is positioned at the cursor's lower left corner.
Overlay placement
Overlay is positioned at the cursor's top right corner.
Overlay placement
Overlay is positioned at the cursor's top left corner.

Variants

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.

Interactive overlay variant 1
Interactive overlays always contain a nested close button.
x: 16px
y: 12px
z: 8px

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.

Animation

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.

Overlay animation

Responsive behaviour

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.

Overlay responsive behaviour

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.

Table

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.

Table overlay

Infographics

Example with infographic

Tags

Example with tags

Tiles

Example with tile

Overlay content

The content in overlays can vary depending on the usage. Please use our Angular components as content elements.

Overlay variants basic
x: 16px
Overlay variants icon

General

x: 16px
y: 12px
z: 4px

Icon

height: 20px
width: 20px
Overlay variants microbarchart

General

z: 8px

Microbarchart

height: 8px
min-width: 160px

Overlays can also contain tables. Table rows in overlays have a height of 28px.

Overlay variants table
x: 16px
y: 12px
Overlay interactive variant 2
y: 12px
x: 16px
Overlay interactive chart interaction