Ввод данных в большие поля может быть кошмаром UX; это может быть проблемой, чтобы упростить для пользователей ввод своих данных. Как они знают, что войти? Можете ли вы действительно объяснить, что они предназначены для ввода только в метке ввода?
У нас была та же проблема, что и в проекте, в котором я недавно участвовал. Пользователи могли вводить заголовок статьи (в данном случае), и хотя это было необходимо — форма не будет отправлена, если контент не был введен в Поле заголовка — мы хотели заверить пользователей, что они всегда могут изменить заголовок позже. Кроме того, мы хотели дать несколько полезных советов и привести примеры хороших названий. Таким образом, мы решили, что наличие дружественных, полезных всплывающих подсказок, которые будут отображаться, если они необходимы, но не будут мешать, были подходящим способом.
HTML-код для всплывающих подсказок довольно прост. Класс helpToolTipSubject используется для настройки действий jQuery.
содержит как вопросительный знак (текст, который появляется на кнопке), так и содержание всплывающей подсказки.
дает вам хук CSS для добавления точки внизу всплывающей подсказки. Код для этого ниже.
<input class="helpToolTipSubject" type="text" name="name" id="name" value="Pretty, huh?"></input> <div class="helpToolTipTrigger">? <div class="tooltip"> <!-- The tooltip content goes here --> <p>You can add a really helpful tooltip giving your users hints about what they need to enter into the input field.</p> <!-- This is for the point --> <div class="point"></div> </div> </div>
Идея о том, что мы могли бы оказать некоторую помощь там, где она нужна пользователю, но без ее вмешательства, хорошо соответствовала нашим потребностям. Мы использовали всплывающие подсказки, чтобы показать подсказки, которые после того, как они были прочитаны, больше не нужно было видеть (если пользователь не чувствовал, что ему нужно напоминание).
Поэтому JavaScript должен найти все триггеры всплывающей подсказки (с помощью добавленных нами CSS-классов), связать событие нажатия с кнопкой и узнать, когда нажимается кнопка, он может открыть подсказку, добавить наложение (чтобы закрыть все остальное на странице и ждать кликов), и будьте готовы скрыть всплывающую подсказку и наложение, если есть еще один клик.
Чтобы проверить JavaScript (который немного сложен, но я довольно подробно его прокомментировал) и CSS, посмотрите исходный код этого примера .