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


Overlay basic styles


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


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


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


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


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.


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.


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.


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


Example with infographic


Example with tags


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


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


height: 20px
width: 20px
Overlay variants microbarchart


z: 8px


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