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

подсказки

Рассказывает Юсуф Эль Азизи


Недавно я разбирал одно короткое руководство по созданию простых подсказок на чистом 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

Осталось добавить анимацию для подсказки:

Вот конечный результат:

See the Pen CSS Tooltip by Eduardo Machado de Oliveira (@dudaskank) on CodePen.

Перевод статьи «A step-by-step guide to making pure-CSS tooltips»