Overlays

content hover tooltip

Introduction

Overlays appear on hover and display additional context information.

Overlay example

They provide "shortcuts" on desktop. Only one overlay be visible at a time.

Styleguide

Long names or links can be abbreviated with three dots

Overlay basic styles

Measurements

x: 16px

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: 620px
min-width: 36px

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

Variations

It is possible to use icons or micro charts in overlays.

Overlay variations

General

x: 16px
y: 8px
z: 4px

Icon

height: 20px
width: 20px

Microbarchart

height: 8px
min-width: 160px

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

Overlay variations table

x: 16px
y: 4px

Placement

Overlay placement

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.

If there is no space on the left or right corner, the overlay should be centered on the bottom line of the cursor.

Overlay centered under cursor

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

Interactive Overlays

Overlays can hold interactive elements.

Interactive overlay

Compared to default overlays, the position of interactive overlays can be fixated with a click. This enables users to click links and buttons within the overlay.

Interactive overlays can only be used on elements with no other interactions. This overlay can also be used on mobile devices.

Interactive overlay measurements

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

distance: 40px

Responsive behaviour

Overlays that use a two-colummn layout can be responsive.

Overlay responsive behaviour

Examples

Here are some examples on how the overlay could be used.

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 style

x: 16px
highlight-color: $turquoise-100

Infographics

Example with inforgraphic

Charts

Example with chart

Tags

Example with tags

Tiles

Example with tile