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

Недавно я работал над коротким руководством по созданию простых всплывающих подсказок с использованием чистого CSS (без дополнительных элементов HTML или JavaScript). Позже я использовал эту технику в своем собственном проекте и выяснил некоторые хитрости, чтобы улучшить ее.

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

К концу этого поста вы узнаете, как добавить всплывающую подсказку к любому элементу, добавив простой атрибут.

Проблема

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

Я начал с Googling «CSS Tooltip Generator». Я нашел немало генераторов. Их подход заключался в добавлении диапазона с абсолютной позицией внутри элемента, для которого вы хотите всплывающую подсказку.

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

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

Этот трюк был умным и чистым, но он не был достаточно общим.

Улучшение решения

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

Не только это, но мы хотим, чтобы можно было легко указать положение всплывающей подсказки:

Во-первых, как упоминалось в видео, мы добавим к кнопке псевдоэлемент «до» и «после».

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

div :: after {
 содержание: «после»;
}
div :: before {
 содержание: «до»;
}

Результат выглядит примерно так:

 до    после

Давайте пройдемся по этому шаг за шагом

Шаг 1: мы добавим атрибут всплывающей подсказки так:

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

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

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

Мы также добавили некоторые приемы позиционирования, чтобы подсказка была в центре со свойством transform, и это результат.

Вот наш CSS:

Шаг 2: мы просто играем с псевдоэлементами :: before и :: after, чтобы создать позицию всплывающей подсказки. Наша кнопка HTML будет выглядеть так:

Положение всплывающей подсказки может быть: правое, левое, верхнее или нижнее.

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

Этот CodePen показывает конечный результат (и вы можете нажать, чтобы увидеть окончательный код):

Если вы знакомы с React, проверьте мой пост:

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

Читать больше историй https://elazizi.com/