Тултип — это всплывающее уведомление, как правило работающее по наведению, фокусу или по клику. Когда отображать тултипы? Когда нужно дать короткий поясняющий текст к интерфейсу или помочь с заполнением полей. Какие основные способы работы тултипа? По клику, По наведению, По фокусу, гибридный — по фокусу или наведению. Важные особенности тултипов Должны быть компактными. Рекомендуемая ширина — 250 px, максимальная — 500 px. Тултип должен находиться на расстоянии 2px от видимых границ объекта...

HTML имеет свои встроенные тултипы, но часто их дизайн не соответствует требованиям стиля макета. Сейчас мы научимся стилизовать тултипы. Для начала, нужно понять, что стандартный тултип - это своеобразное описание для элемента. Самый простой вид тултипа, который мы здесь будем рассматривать, не требует от HTML практически ничего. Мы будем использовать атрибут aria-label, который служит для описания элементов скринридерам (в основном, для людей с нарушениями зрения). Для того, чтобы через CSS "захватить"...

Автор блога рассказывает, как решал проблему всплывающих подсказок (tooltip) на страницах своего продукта FrontPrep, где рядом с вопросами для собеседований показаны логотипы компаний: при наведении на логотип должна появляться подсказка с названием компании. Изначально задержка перед показом подсказки была выставлена в 0 мс, из-за чего при простом перемещении курсора по странице подсказки мгновенно выскакивали над каждым логотипом на пути курсора. Автор добавил задержку в 200 мс перед открытием,...

Микроинтеракции на сайте - это те самые мелкие реакции интерфейса, которые делают его живым: кнопка слегка двигается при наведении, форма подтверждает отправку, элемент меняется при клике. Эти детали почти незаметны по отдельности, но в сумме они сильно влияют на поведение пользователя. Разберёмся, какие интерактивные элементы сайта действительно работают, как они влияют на восприятие и где анимации помогают повысить конверсию, а где - наоборот мешают. Что такое микроинтеракции на сайте и зачем они нужны Если упростить, микроинтеракции - это реакция интерфейса на действие пользователя...