Пошаговое руководство по созданию подсказок на чистом CSS
Прочитав это пошаговое руководство, вы научитесь создавать подсказки к элементам при помощи чистого CSS, без добавления HTML-элементов или JS-кода.
12К открытий12К показов
Рассказывает Юсуф Эль Азизи
Недавно я разбирал одно короткое руководство по созданию простых подсказок на чистом CSS (то есть без дополнительных HTML-элементов и кода на JavaScript). Позже я использовал эту технику в своём проекте и придумал пару приёмов её для улучшения. Здесь я хочу поделиться своим опытом.
Эта статья — пошаговое руководство, которое поможет понять приёмы создания подсказок, чтобы вы могли сделать это самостоятельно. Вы узнаете, как добавить подсказку к любому элементу, используя простой атрибут.
Проблема
Мне нужно было создать пользовательские подсказки для проекта.
Начал я с того, что загуглил «генератор подсказок CSS». Генераторов нашлось немало. Они добавляли span
с абсолютной позицией внутри элемента, для которого нужна подсказка.
Мой проект уже был реализован, поэтому я не хотел возвращаться к коду и добавлять везде span
. Это заняло бы много времени и усложнило бы HTML-код. Должен был быть путь проще.
Наконец, я нашёл на YouTube отличное руководство по подсказкам. Приём заключался в создании подсказок с помощью псевдоэлементов ::before
и ::after
:
Приём хорош, но не универсален.
Улучшение решения
В этой части я расскажу про более общий подход. Заодно мы изучим некоторые свойства CSS. Итак, мы хотим получить:
Мы также сможем определять позицию подсказки:
Прежде всего, как было сказано в видео, мы добавим к кнопке псевдоэлементы ::before
и ::after
. Они позволяют вставлять контент до или после содержимого элемента.
Работает это так:
Результат будет таким:
Шаг 1
Добавим атрибут подсказки:
Нам нужны псевдоэлементы ::after
и ::before
. Это будут прямоугольники с текстом подсказки. Чтобы создать прямоугольник с помощью CSS, добавим границы вокруг пустого элемента, созданного с помощью свойства content
.
Псевдоэлемент ::before
используется для отображения содержимого подсказки. Мы добавляем его со свойством content
и извлекаем значение атрибута подсказки. Значение для содержимого может быть строкой, значением атрибута элемента (как в нашем примере) или даже изображением url(path/image.png)
.
Чтобы это работало, расположение элемента кнопки должно быть относительным. То есть позиция всех элементов внутри кнопки зависит от позиции самой кнопки.
Мы также используем несколько приёмов с позиционированием, чтобы разместить подсказку в центре при помощи свойства transform
.
Наш CSS:
Шаг 2
Переберём комбинации псевдоэлементов ::before
и ::after
, чтобы выбрать позицию подсказки. HTML нашей кнопки будет выглядеть так:
Подсказка может быть расположена cлева, справа, сверху или снизу:
Шаг 3
Осталось добавить анимацию для подсказки:
Вот конечный результат:
12К открытий12К показов