Description

Informer is a pattern used to show rich tooltips within the interface. It's useful when there is limited space to add, for example, a hint link alongside a component.

Appearance

The informer consists of the following elements:

• Info icon with margin-left: 4px
• Tooltip with the message (appears on clicking or pressing Enter/Space on the icon)

TIP

Avoid using the Info icon with the h1 title. This title typically pertains to hero blocks and similar elements. Adding tooltips to the main page title might seem unusual.

Info icon with different title sizes

Font size	Icon size	Usage
36px (--fs-700), 32px (--fs-600)	L	Use exclusively for the largest titles and controls.
Smaller than 24px (--fs-500)	M	Suitable for text sizes smaller than 24px.

Interaction

Informer states

State	Appearance example	Styles
Normal		color: var(--intergalactic-icon-secondary-neutral)
Hover, active		color: var(--intergalactic-icon-secondary-neutral-hover-active), cursor: pointer.

Click zone

Informer click zone

Icon size	Target zone size	Appearance example
L	24px * 24px
M	16px * 16px

Tooltip

For comprehensive details, refer to Tooltip.

Usage in UX/UI

When the Info icon contains supplementary information about a control within a group of controls (for example, filters), pay attention to margins.

When controls are accompanied by text labels, position the Info icon adjacent to the labels.