Как сделать всплывающий текст
Перейти к содержимому

Как сделать всплывающий текст

  • автор:

Создание простых всплывающих подсказок на HTML5, CSS и jQuery

Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных div-контейнеров для подсказок, или создание всплывающих подсказок на чистом CSS, я нашел универсальное решение, которое не будет загромождать код, будет кроссбраузерним, и в то же время будет очень простым для реализации.
Всех, кого заинтересовал мой способ решения этой простой задачи, прошу под кат.

Решение

Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.

Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:

Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.

Для хранения я использую атрибут data-tooltip.
C HTML закончили — можно перейти к стилям.

Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.

С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.

jQuery

Ну а теперь самое интересное — jQuery.

Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

Вот и все!
В итоге мы получим что-то такое: Демо

Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

Как сделать всплывающий текст на изображении в html?

Всплывающий текст на изображении при наведении на него мышкой — довольно популярный и красивый визуальный эффект, который часто используют в своей работе многие программисты. Реализовать такую штуку довольно просто, в своем уроке я буду использовать исключительно CSS3. Это легко и просто.

Для работы нам понадобится исполняемый файл и картинка. Код, который нужно вставить, следующий:

Ну вот собственно и все. Теперь на картинку накладывается блок с текстом, в котором можно разместить все, что угодно. Очень удобно.

Тултипы или всплывающие подсказки в интерфейсе

Привет! Я Владимир Белов — продуктовый дизайнер в Group-IB. Веду телеграм-канал «Заметки дизайнера», где делюсь полезными ссылками, интересными продуктами для собственного анализа и статьями.

Вступление

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

Как это работает

Пользователь наводит мышкой на элемент для отображения всплывающей подсказки. В ней может написан текст, который поясняет то или иное действие, описание объекта или взаимодействие.

Когда необходимо использовать тултипы

Кнопка без текста

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

Где чаще всего используется:

  • Навигация
  • Текстовый редактор
  • Таблица
  • Формах

Горячие клавиши

Использование горячих клавишей ускоряет работу. Во всплывающую подсказку можно отобразить их для перехода или действия. С каждым разом пользователь запоминает часто используемые горячие клавиши, но, кроме этого, необходимо добавить раздел в Help Center со всем списком клавиш с пояснением. Не рекомендую использовать большое количество клавиш в интерфейсе на каждое действие, так как физически и когнитивно сложно запомнить их. На примере потрясающий продукт linear.app, и они на каждое окно, кнопку, поле добавили разные горячие клавиши с комбинациями.

Пояснение

Всплывающую подсказку используют, когда необходимо дать пояснение пользователю, почему он не может использовать ту или иную функцию в интерфейсе. Это помогает дать обратную связь, нежели просто заблокировать кнопку или поле, чтобы пользователь самостоятельно разбирался, искал это в Help Center или писал в техподдержку.

Требования

Чаще всего это используется в формах, когда требуется дать подсказку пользователю по пароль. Это помогает сразу придумать или сгенерировать пароль таким образом, чтобы по несколько раз не вводить из-за невыполнения требований.

Дополнительная информация

Всплывающую подсказку можно использовать для отображения данных, а не короткого текста. Здесь важно учитывать, какие данные вы даёте, их полезность. Проведите анализ и исследование для того, чтобы понять какие данные необходимо выдавать, какие можно вставить, а какие проигнорировать. Если вы показываете подсказку на пол экрана, то явно совершаете ошибку.

Рекомендации

Вам необязательно следовать этим рекомендациям, так как это зависит от того, в какой сфере вы проектируете, что вы проектируете и на какие носители проектируете. Весь список написан опираясь на мой весь опыт.

Всплывающий текст при наведении курсора на элемент

Есть элемент и задача такова, что при наведении курсора на элемент, должен всплывать элемент с текстом (хоть div , хоть span — это уже неважно, какой сделать).

Подскажите, пожалуйста, как это реализовать? :hover не работает.

Sasha Omelchenko's user avatar

К любому html-элементу может быть применён атрибут title, текст которого будет показываться во всплывающей подсказке браузером.

Другой вариант на :hover отображать ::before или ::after с нужным контентом и соответствующей стилизацией. Обычно один из них используется для полезного контента, а второй для формирования треугольной стрелочки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *