Малые подсказки
С фиксированной шириной
С картинками
Узкие подсказки
Варианты содержимого
Малые подсказки
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hints-Measures-New-1024x788.png)
Чеклист:
1. Подсказки вмещают в себя максимум одно предложение.
2. Ширина подсказки зависит от содержимого.
3. Стрелка всегда располагается по центру подсказки.
4. Добавляйте к подсказке тень уровня Z 2.
5. Стиль текста — Body M 300 (Compact).
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hints-Examples-1024x505.png)
Свободное позиционирование относительно самого элемента.
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Small-Hints-Paddings@2x-1024x429.png)
Отступ от края страницы до подсказки — не менее 20px. Когда боковой отступ меньше, подсказка появляется слева или справа от самого элемента.
С фиксированной шириной
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Fixed-Hint-Lots-Info@2x-1024x586.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Fixed-Hint-Little-Info@2x-1024x447.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-Closing-1024x627.png)
Положение стрелки зависит от контента — когда высота подсказки меньше 148px, стрелка выравнивается по центру, в остальных случаях стрелка располагается на расстоянии 68px от края.
Подсказки с картинками
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-With-Pic-Example-1024x384.png)
Картинка выравнивается по правому/левому краю блока. Чем шире становится картинка, тем шире подсказка.
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-With-Picture-Right-Or-Left-1024x655.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-With-Picture-Top-Bottom-716x1024.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Img-Big-Size-1024x460.png)
Когда блок с текстом и вертикальными отступами меньше по высоте, чем картинка, он выравнивается вертикально по центру картинки.
Узкие подсказки
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Narow-Hint-Metrics-1024x462.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Narrow-Arrows-1024x719.png)
В узких подсказках фиксированной ширины стрелки всегда располагаются по центру. В узких подсказках также могут присутствовать картинки.
Варианты содержимого
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-Content-01-New-1024x806.png)
В подсказке могут находиться:
— заголовок уровня H3, уровня H4 или H5;
— основной текст Body S 300 (Normal) или Body M 300 (Normal);
— контентные ссылки Link S 300 (Normal) или Link M 300 (Normal);
— маркированные и нумерованные текстовые списки;
— Simple button или Brand button в размере Minor;
— фирменные иллюстрации.
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-Content-02-New-1024x970.png)
В одной подсказке может размещаться несколько уровней заголовков.
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Hint-Pictures-879x1024.png)
Пример размещения нескольких картинок.
Видео анимации всплывающего окна доступно по ссылке: https://youtu.be/K6vfqs6x19g