Overlays appear on hover and display additional context information.
They provide "shortcuts" on desktop. Only one overlay be visible at a time.
Long names or links can be abbreviated with three dots
line: 1px dotted color: $gray-300 min-width: 20px
border: 1px solid $turquoise-600 //inside border-radius: 4px background-color: #ffffff max-width: 620px min-width: 36px
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
It is possible to use icons or micro charts in overlays.
x: 16px y: 8px z: 4px
height: 20px width: 20px
height: 8px min-width: 160px
Overlays can contain tables. Table rows in overlays have a height of 28px.
x: 16px y: 4px
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.
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.
Overlays can hold interactive elements.
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.
x: 12px y: 16px z: 4px distance: 40px
Overlays that use a two-colummn layout can be responsive.
Here are some examples on how the overlay could be used.
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.
x: 16px highlight-color: $turquoise-100