Hint
Общая информация.
Хинт — это подсказка, появляющаяся при наведении на элемент.
Анатомия
Элемент для котрого нужна подсказка
Текст / подсказка
Контейнер хинта
Когда использовать
Используются в элементах не вмещающих полный текст или требующих небольшого пояснения. Например: в иконках без текста, в инпутах, оверлей-меню и т.д.
Описание работы
Хинт появляется при наведении курсора на элемент, с задержкой в 400 миллисекунд. Это нужно чтобы при движении курсора по странице не было моргания хинтов.
Исчезает хинт мгновенно, как только курсор «уйдет» с элемента. Хинт исчезает и в том случае, если после его появления прокрутить страницу.
Хинт должен полностью заменить в интерфейсе стандартные хинты браузера.
Оформление
Текст хинта — максимально короткий, рекомендуется не больее 160 символов с пробелами
Не рекомендуется для показа инструкции или описания
Не дублируйте название объекта в хинте, за исключением случаев, когда оно не умещается в видимую область.
Текст выравнивается по левому краю.
Размеры
Внешние размеры
Могут варьироваться до 60% от высоты и ширины экрана.
Внутренние размеры
Внутренние падинги - 8рх.
Расположение
Дефолтным поведением является появление снизу курсора. Но также может появляться справа, слева, или сверху в зависимости от расположения вызываемого элемента и наличия пространства на экране
Не может выходить за границы экрана
Расстояние от вызываемого элемента до хинта 8рх.
Цвета
Last updated
