Пошаговое руководство по созданию тултипов на чистом CSS

Пошаговое руководство по созданию тултипов на чистом CSS

От автора: не так давно я проработал небольшой урок по созданию простых тултипов на чистом CSS (без дополнительных HTML-тегов и JS). Чуть позже я использовал эту технику в своем проекте и придумал парочку советов по тому, как сделать тултипы еще лучше. Эта статья – пошаговый урок, который поможет понять эти CSS-советы, чтобы и вы могли создавать тултипы на чистом CSS. К концу статьи вы научитесь добавлять тултип к любому элементу с помощью простого атрибута.

Проблема

Мне нужно было создать кастомный тултип в свой проект.

Сначала я загуглил «CSS Tooltip Generator» и нашел парочку генераторов. Генераторы добавляли span с абсолютным позиционированием внутрь элемента, к которому нужно добавить тултип.

Но мой проект уже был завершен, я не хотел поднимать код и добавлять все эти span’ы. Это отняло бы у меня какое-то время и усложнило HTML. Должен был быть способ получше.

В конце концов, я нашел отличный урок на YouTube по тултипам. Там для создания тултипа использовали селекторы :: before и :: after. Смотрите видео по ссылке. Трюк довольно умный и чистый, но не общий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Улучшаем решение

В этой части я сделаю трюк более общим, а также мы поближе познакомимся с парочкой CSS-свойств. Нам нужно что-то подобное:

Помимо этого необходимо, чтобы можно было легко позиционировать тултип:

Во-первых, как и в видео, мы добавим псевдоэлементы before и after к button.

::after и ::before позволяют вставлять контент на страницу из CSS перед и после контента элемента. Принцип их работы:

Результат примерно следующий:

Разберем по шагам

Шаг 1: добавляем атрибут тултипа вот так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Здесь нам нужны псевдоэлементы ::after и ::before, которые будут представлять из себя простой прямоугольник с контентом тултипа. С помощью CSS создаем простой прямоугольник. Для этого добавляем рамку вокруг пустого элемента, который создается с помощью свойства content.

В ::before показывается контент тултипа. Псевдоэлемент добавляется со свойством content, в значение которого извлекается значение атрибута tooltip. Значение content может быть строкой, значением атрибута элемента, как в нашем примере, или даже изображением url(path/image.png).

Позиционирование button должно быть относительным. Другими словами, позиция всех элементов внутри button относительна позиции самой кнопки.

Добавим парочку трюков с позиционированием, чтобы центрировать тултип с помощью свойства transform.

Наш CSS-код:

Шаг 2: меняем значения ::before и ::after, чтобы настроить позиционирование. HTML-код кнопки:

Позиция тултипа может быть right, left, top или bottom.

Шаг 3: на последнем шаге мы добавляем простую hover анимацию к тултипу

В CodePen показан результат (можете посмотреть код):

Автор: Youssouf El Azizi

Источник: https://medium.freecodecamp.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree