Всплывающие подсказки


QIWI.com
IOS
Android
АСО

QIWI.com

Для совместимости с тачскринами все всплывающие подсказки имеют два триггера: onHover (по наведению мыши) и onClick (по клику).

Построение формы

Подложка для подсказок строится по заданным размерам.

Построение тени

Тень находится на отдельном слое, дублирующем основной. Размеры тени уменьшаются на 4px сверху/снизу, и на 12px по бокам.

Отступ появления

Подсказки всегда всплывают на расстоянии 16px до иконки вопроса.

Клик на иконку

Заданая область клика на иконку для вызова и скрытия подсказки 32х32px.

 

Область ховера

У вызваной подсказки задана увеличенная область наведения, помогающая избежать случайного закрытия.

 

Видео анимации всплывающего окна доступно по ссылке: https://youtu.be/K6vfqs6x19g

 

Наверх

 

IOS

Наверх

 

Android

Наверх

 

ACO

Наверх