Как стать автором
Обновить

Пояснения к ссылкам и элементам на страницах

Время на прочтение 1 мин
Количество просмотров 757
Habr
Задумался над тем, что неплохо было бы делать tooltips ко всем значимым элементам на странице. Я на хабре уже какое-то время, а все равно — иногда некоторые цифры, например, рядом с названием блога, вызывают вопрос — что же это такое.
А так — взял, подвел курсор, прочитал.
Всего голосов 22: ↑19 и ↓3 +16
Комментарии 17

Создаем простой tooltips с помощью CSS и jQuery

Время на прочтение 4 мин
Количество просмотров 69K
Разработка веб-сайтов *
Перевод
CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.
image
Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:
Читать дальше →
Всего голосов 57: ↑52 и ↓5 +47
Комментарии 40

Тултипы на CSS3 и HTML5

Время на прочтение 2 мин
Количество просмотров 67K
CSS *
Из песочницы
В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.



Читать дальше →
Всего голосов 111: ↑108 и ↓3 +105
Комментарии 46

Создание анимированных tooltips'ов с помощью CSS3

Время на прочтение 3 мин
Количество просмотров 8K
CSS *
Перевод
Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.

image


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

Читать дальше ...
Всего голосов 97: ↑91 и ↓6 +85
Комментарии 15

Тултипы (tooltips). Что это такое и как их проектировать

Время на прочтение 5 мин
Количество просмотров 19K
Веб-дизайн *Разработка веб-сайтов *Usability *Прототипирование *Дизайн
Туториал

Тултип, от английского tooltip. Это такая короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент. Или при фокусировании на элементе с помощью клавиатуры. Или при длительном разглядывании элемента, если вы в шлеме виртуальной реальности с трекингом глаз.

Привет, меня зовут Егор Камелев. Я занимаюсь проектированием интерфейсов с 2006 года. Сегодня хочу поделиться чек-листом вопросов, связанных с проектированием тултипов.

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 1

React, всплывающие подсказки (tooltips), для самых маленьких

Время на прочтение 11 мин
Количество просмотров 6.6K
CSS *JavaScript *ReactJS *TypeScript *
Туториал
Recovery mode

Во множестве проектов web разработки для улучшения пользовательского опыта используются всплывающие подсказки - tooltips. В статье рассматривается создание переиспользуемого и гибко настраиваемого React компонента для отображения таких всплывающих подсказок.

К статье
Всего голосов 2: ↑1 и ↓1 0
Комментарии 16