Создание анимированной всплывающей подсказки легко с Hint.css

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

Тем не менее, некоторые распространенные недостатки использования плагина jQuery заключаются в том, что он поставляется с набором бесполезных опций и наполнен кодами, которые замедляют работу сайта.

Итак, сегодня мы рассмотрим альтернативу создания всплывающей подсказки. Благодаря множеству новых функций в CSS3, теперь можно создавать сопоставимые модные всплывающие подсказки только с использованием CSS. Давайте начнем.
Использование Hint.css
В этом посте мы не собираемся его строить с нуля. Мы будем использовать Hint.css, Hint.css – это коллекция классов и правил стилей, позволяющая нам быстрее создавать простую подсказку. Чтобы использовать, просто добавьте таблицу стилей в ваш HTML-документ или скопируйте все правила стиля в свою собственную таблицу стилей.

Теперь, в тексте вашего документа, оберните кусок, который вы хотите вставить всплывающую подсказку со встроенным элементом, как с помощью элемента span или anchor. И добавьте содержимое всплывающей подсказки с атрибутом data-hint, вот так.

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

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

Рекомендуемое чтение: понимание псевдоэлемента

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

Итак, для лучшего пользовательского опыта мы можем добавить несколько дополнительных стилей, чтобы дать ему индикатор, например:

пролет[data-hint] {
граница снизу: 1px пунктирная #aaa;
}
пролет[data-hint]: hover {
курсор: указатель;
}

Эти стили придают элементу span с атрибутом data-hint пунктирную границу. Вы можете настроить стили в соответствии с вашими требованиями дизайна.
Направление подсказки
Мы можем показать всплывающую подсказку в четырех разных направлениях: сверху, снизу, справа и слева, используя предоставленные классы.

Осталось

торговые площадки

Правильно

торговые площадки

верхний

торговые площадки

Низ

торговые площадки

Или продолжайте показывать подсказку

торговые площадки

Последняя мысль
Благодаря более продвинутым свойствам в CSS3 сегодня мы больше не полагаемся исключительно на JavaScript или jQuery для создания причудливого пользовательского интерфейса, такого как создание всплывающей подсказки, и с помощью Hint.css мы можем создать его в оснастке. Но, как было сказано ранее в этом посте, эта техника позволяет нам создавать простые текстовые подсказки.

Если вы хотите создать более продвинутую всплывающую подсказку, скажем, подсказку с изображением или показом всплывающей подсказки при щелчке мыши, а не при наведении курсора мыши, использование JavaScript или jQuery все еще является лучшим способом.