Что такое tooltip в тильде
Разбираем элемент Tooltip в Zero block
🔴 Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом или изображением. С помощью тултипа можно добавить дополнительную информацию о конкретной детали на сайте, не перегружая дизайн.
Например, вы продаёте матрасы и хотите рассказать про их каждый слой. Вместо того чтобы подписывать слои на изображении, добавьте поверх картинки минималистичные тултипы. Если человек захочет узнать подробнее о каждом слое, он сможет навести на тултип и прочесть информацию. Это поможет грамотно использовать пространство сайта и ответить на возможные вопросы пользователя о деталях продукта.
Рассказываем, как настроить тултип на Тильде:
Добавьте элемент Tooltip в Zero block и разместите его в нужном месте. Затем настройте внешний вид: можно изменить цвет и размер, добавить тень или загрузить иконку, которая будет отображаться внутри кружка. Во всплывающей подсказке разместите текст или изображение. Готово!
Размещать тултип можно у любого элемента в Zero block: например, вы можете добавить всплывающую подсказку рядом с полем в форме. Но убедитесь, что пользователю понятно, что при наведении на тултип что-то произойдёт. Например, можно использовать иконку в виде знака вопроса.
📌 Не забудьте проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы плашка с текстом или изображением не обрезалась по краям блока.
Zero Block: отзывчивый дизайн
По оси X Grid Container всегда позиционируется по центру.
То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.
Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.
Но иногда требуется привязать элемент не к сетке, а к экрану. Например, вы хотите, чтобы логотип всегда был в левом верхнем углу любого экрана.
Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.
У каждого элемента в рабочей области есть координаты — положение относительно начало координат по оси X и по оси Y.
Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.
Мы предусмотрели, чтобы размер элементов так же мог задаваться в процентах. Таким образом получаются «резиновые» элементы, которые меняют размер, в зависимости от окна браузера.
По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.
С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.
Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.
Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.
При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.
Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.
Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.
Будьте внимательны при загрузке изображений: они должны быть подходящего размера, чтобы не потерять в качестве при масштабировании под большие экраны.
Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.
Zero Block: создание собственных блоков
Как автоматически импортировать макет из Figma в Zero Block
В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.
В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
Размер кнопки и фигуры меняется во всех направлениях.
Ниже — координаты положения элемента. Могут быть заданы в пикселах или в процентах. Ниже мы рассмотрим этот момент подробнее.
Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.
Прямоугольник : измените длины сторон, потянув мышкой за контрольные точки.
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.
Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Тултип Tooltip
Тултип — это подсказка, которую пользователь открывает сам, кликом по элементу.
Обычно маленькую подсказку называют тултип, а большую хинт. Но в Контур.Гайдах всё наоборот. Так исторически сложилось. Зато проще запомнить: меньше слово — меньше контрол.
При общении с пользователями мы говорим не «тултип», а «всплывающая подсказка».
Когда использовать
Тултип используется для коротких поясняющих текстов, если необходимо дать разъяснение к деталям интерфейса, упомянутой информации или помочь с заполнением полей. Если эти подробности не нужны постоянно, но могут помочь пользователю в момент когда он испытывает трудности.
Если пояснение содержит много информации, то полезнее разместить его в виде статьи на отдельную страницу, а в тултип добавить ссылку.
Описание работы
Тултип может быть вызван кликом по ссылке или иконке для показа справки или дополнительной информации, а наведением на элемент формы или фокусом на нем — для показа сообщения об ошибке.
Иконка предназначена для ссылок на руководство пользователя, и использовать ее для вызова тултипа с контекстной справкой нельзя.
Тултип может содержать текст, изображение, ссылки. Содержание тултипа выровнено по левой стороне.
Появление и скрытие тултипов
Тултип может быть открыт одним из 4 способов:
Появление по клику
В тултипе, который открывается по клику обязателен крестик для закрытия.
Такой тултип закрывается любым кликом за его пределами и не блокирует активные элементы на странице. Например, если пользователь кликнул по ссылке вне тултипа, он закрывается, и происходит переход по ссылке.
Появление по фокусу
В тултипах, которые открываются по фокусу или наведению, крестик не нужен.
Тултип, который открывается по фокусу на элементе, закрывается, когда элемент теряет фокус.
Появление по наведению
Тултип, который открывается по наведению на элемент интерфейса, не должен исчезать, если курсор переместился с элемента на сам тултип.
Такие тултипы открываются и исчезают с задержкой в 100 миллисекунд.
Задержка на появление нужна, чтобы при движении курсора по странице не было случайного моргания тултипов.
Задержка на исчезновение нужна, чтобы пользователь успел перевести курсор на тултип и взаимодействовать с содержимым тултипа — например выделить текст или нажать на ссылку.
Появление по фокусу или наведению
Это режим необходимый для работы тултипов валидации с предупреждениями или сообщением об ошибками. Такие тултипы открывются либо по фокусу на элементе либо когда на элемент навели курсор мыши.
Задержка на появление и исчезновение работает так же как у тултипов с появлением по наведению. Тултип не должен исчезать, если курсор переместился с элемента на сам тултип.
Размер и расположение
Тултип должен быть компактным, не перекрывать большую часть экрана и не выходить за его границы. Рекомендуемая ширина прямоугольной области тултипа — 250 px, максимальная — 500 px.
Тултип появляется справа от вызвавшего его элемента. Если справа не хватает места — то с других сторон от элемента, в порядке убывания приоритета: справа, сверху, слева, снизу — против часовой стрелки.
Если тултип может закрыть важную для пользователя информацию или другие контролы, это направление можно запретить для тултипа.
Указатель тултипа расположен напротив первого символа первой строки внутреннего текста. В результате текст на странице выровнен с текстом в тултипе:
Указатель тултипа всегда находится на расстоянии 2px от границ объекта, либо на расстоянии 2px от видимых границ, если границы объекта отличаются от видимых более чем на 16px. Как измерять отступы.
Тултип не должен менять свое положение при прокрутке страницы (например, открылся вверх, но при прокрутке оказался у края браузера и переместился вниз) — в какую сторону изначально открылся, там и остается до закрытия.
Инклюзивные компоненты: тултипы и тоглтипы
Тултипы ( в этом переводе я буду транслитерировать слово «tooltip», их ещё часто называют подсказкой — прим. переводчика), которые мой друг Стив ласково называет «тутлипы» (tootlips), давно устоявшийся интерфейсный паттерн. Буквально это «подсказки для инструментов» в виде небольших пузырей с информацией, которые объясняют цель непонятных контролов и инструментов. Распространённый пример — контрол в виде таинственной иконки, смысл которой пользователь пока ещё не понимает.
Я хотел бы поговорить о том, когда и как эти пузыри должны появляться, так как столкнулся с большим количеством тултипов, которые, кажется, ведут себя немного по-разному. Я сделал вывод, что все эти реализации можно разделить на две самостоятельные группы: настоящие тултипы и паттерны, которые я с опаской называю «тоглтипы» (toggletips). Это слово придумал Стив в ходе пары исследований и экспериментов, которые не так давно провёл.
Инклюзивный дизайн часто затрагивает проблему того, как обеспечить пользователя правильным инструментом для работы, и как создать правильный тултип к нему. В этой статье я рассмотрю разные ситуации, для которых могут потребоваться тултипы или тоглтипы, и покажу как сделать их инклюзивными.
Атрибут title
Мы не можем говорить о тултипах без упоминания атрибута title : стандартный для HTML атрибут, предназначенный для пузырей с контекстной информацией. Блог Paciello Group не обходится без сарказма при описании вклада title в веб-интерфейсы:
Я большой сторонник использования стандартных HTML-элементов и атрибутов тогда, когда они доступны. Это наиболее эффективный и правильный с точки зрения производительности путь создания удобных веб-интерфейсов. Но, несмотря на то, что атрибут title поддерживается спецификацией, он действительно не подходит для своей цели.
Опять же, нам ещё предстоит определить эту цель. Для чего следует использовать тултипы? И даже если мы сможем сделать их такими, что с ними смогут взаимодействовать многие пользователи, нужны ли они вообще?
Случаи использования тултипов
Как мы уже установили, тултипы нужны для пояснений: они дают недостающую информацию. Но почему эта информация должна изначально отсутствовать? Как я писал в Inclusive Design Patterns, иконки могут упростить понимание интерфейса и помочь в его интернационализации. Существуя отдельно, они всегда могут запутать пользователя, потому что ничего не объясняют. Иконки не содержат информации для пользователей, которые не узнают или не могут расшифровать их.
В большинстве случаев вы должны просто размещать текст рядом с иконками. Как и видимые подписи к полям, которые я только что упомянул, текстовые лейблы являются самым простым способом добавления подписей к элементам. Также они автоматически доступны для скринридеров, если это настоящий текст (а не картинки с текстом).
Типичное объяснение, почему лейблов нет — это «нет места». И это, вероятно, так, если вы решили не использовать их в первую очередь. Если вы считаете их важными с самого начала, то найдёте способ это сделать.
Тултипы — последнее средство там, где пространство действительно стоит дорого — возможно, из-за огромного количества элементов управления, как на панели инструментов в редакторе WYSIWYG. Итак, как бы мы разработали их максимально инклюзивно?
Инклюзивные тултипы
Первое, что нужно сделать, — это сделать текст в тултипах доступным для вспомогательных технологий. Есть несколько способов привязки тултипа к контролу, и мы выбираем между ними исходя из его конкретной роли: это основной лейбл или он нужен для дополнительного пояснения?
У контрола для управления уведомлениями с тултипом «Уведомления» — это основной лейбл. А тултип «Просмотр уведомлений и управление настройками» является дополнительным.
Тултип как основной лейбл
Сейчас пример выше для скринридеров и их пользователей с точки зрения функциональности похож на простую подпись вроде этой:
Текст тултипа доступен при фокусе так же, как если бы на него навёл курсор зрячий пользователь. На самом деле, если бы весь текст появлялся только при наведении, то для зрячих пользователей интерфейс был бы в некоторой степени аналогичен интерфейсу пользователей скринридеров.
Примечание: лишние тултипы
Всё то время, что я работаю консультантом по дизайну интерфейсов, я вижу людей, которые добавляют атрибут title для ссылок с точно таким же текстом:
Если текстовое содержимое элемента хорошо видно, то это избыточно.
title ничего не делает для скринридеров, кроме повтора в некоторых случаях.
Добавляем счётчик уведомлений
Что, если кнопка показывает число непрочитанных сообщений, как это часто бывает (я имею в виду, конечно, Twitter)?