JavaScript - популярный мальчик в веб-разработке, но если вы попробуете CSS, вы увидите, насколько он на самом деле способный.
JavaScript - превосходный инструмент для создания причудливых эффектов и функциональных возможностей в Интернете, а функциональный веб-сайт без JavaScript невообразим. Все это прекрасно, но в некоторых случаях вы захотите использовать CSS вместо JavaScript.
- Вы новичок и еще не изучили JavaScript.
- Вы являетесь мастером JavaScript и знаете, чем больше JavaScript, тем медленнее работает сайт.
- Вам просто интересно, на что способен CSS.
В этой серии статей Только CSS мы реализуем функции, которые обычно требуют JavaScript, с использованием только CSS. В этом уроке мы создадим базовую всплывающую подсказку, используя только CSS. В следующих выпусках Только CSS будут рассмотрены расширенные всплывающие подсказки, панели инструментов, модальные окна и т. Д.
Примечание. Использование препроцессора CSS, такого как SASS, может быть очень удобным, но чтобы сделать это руководство доступным для всех, я буду использовать простой CSS.
Базовая подсказка
В этой части руководства мы создадим всплывающую подсказку, которая будет содержать только строковое содержимое и ничего более. Этот вариант подходит для всплывающих подсказок с небольшой информацией или сокращений.
Для начала создайте index.html и main.css, затем свяжите их. В index.html создайте div.container, а внутри создайте тег p с перемещаемым содержимым. В теге p мы будем использовать настраиваемый атрибут данных с именем data-tooltip для доступа к всплывающей подсказке из CSS.
Теперь, когда разметка завершена, мы можем приступить к реализации всплывающей подсказки с помощью CSS.
Откройте main.css и добавьте базовый стиль к телу и контейнеру к центральному абзацу в области просмотра. Эта часть не имеет прямого отношения к учебнику.
Стиль тега p будет состоять из двух частей: одна связана с внешним видом p, а другая - с всплывающей подсказкой. Итак, в селекторе p мы добавим стиль, не связанный с всплывающей подсказкой, а в селекторе [data-tooltip] мы будем стилизовать всплывающую подсказку.
Чтобы выбрать пользовательские атрибуты в CSS, мы используем селектор [data-...]. Мы можем выбрать теги с настраиваемым атрибутом данных всплывающей подсказки, используя [data-tooltip]. Итак, давайте выберем его в CSS и начнем разбираться с сложной частью.
Мы создадим всплывающую подсказку с использованием псевдоэлемента ::after и расположим его относительно его тега-предка. Следовательно, мы должны позиционировать родительского родственника.
Пришло время создать псевдоэлемент и вывести на экран содержимое, которое мы уже передали в настраиваемый атрибут.
Для этого мы должны добавить ::after в селектор всплывающих подсказок и сделать его содержимое содержимым настраиваемого атрибута всплывающей подсказки. После этого шага мы теперь можем видеть строку, переданную в настраиваемый атрибут. Единственное, с чем мы должны иметь дело, - это стилизация псевдоэлемента ::after, чтобы он выглядел очаровательно. Вы можете стилизовать его, как хотите, но вот мои стили для всплывающей подсказки. По умолчанию я помещаю всплывающую подсказку в конец тега p.
Когда вы изучите приведенный выше код, вы заметите некоторые неожиданные свойства, такие как унаследованная переменная CSS и нулевая непрозрачность. Эти свойства предназначены для следующего шага руководства. Мы должны скрыть всплывающую подсказку, чтобы она не отображалась, когда пользователь не наводит курсор на тег p; следовательно, непрозрачность всплывающей подсказки равна нулю. Мы воспользуемся псевдоклассом :hover, чтобы восстановить исходные свойства этих свойств, и появится всплывающая подсказка.
В псевдоклассе :hover мы устанавливаем непрозрачность на 1 и --scale на 1. Таким образом, всплывающая подсказка отображается на экране. Причина, по которой изначально нужно уменьшить его до 0,95, заключается в том, чтобы создать эффект увеличения при наведении курсора.
Вот и все! Теперь вы создали простую всплывающую подсказку с несколькими строками CSS. Однако, если вы хотите добавить больше функциональности и гибкости к этой подсказке, вы можете продолжить со следующей части.
Улучшение функциональности всплывающей подсказки
В этой части мы попытаемся добавить некоторые полезные функции в созданную нами всплывающую подсказку, чтобы сделать ее более гибкой и практичной. Вот функции, которые мы реализуем.
- Общее время реакции для настройки времени раскрытия и выхода.
- Свойство Position для определения положения всплывающей подсказки.
После того, как эти функции будут реализованы, вы можете без промедления использовать их на своих крутых веб-сайтах и проектах.
1. Общее время реакции
Реализуя это свойство, мы показываем и скрываем всплывающую подсказку через определенное время после наведения. Это делает всплывающую подсказку более элегантной и предотвращает случайное раскрытие.
Мы создадим для этого настраиваемое свойство данных, которое называется data-reaction, и параметры будут быстро, медленно или нет. Нет - значение по умолчанию для этого свойства. Время реакции медленного будет 250 миллисекунд, а у быстрого - 500 миллисекунд. Будет использовано свойство transition-delay. На основе атрибута данных мы установим для переменной CSS разные значения.
Для начала добавьте --delay переменную во всплывающую подсказку и установите для нее значение 0. После этого унаследуйте ее в ::after от ее родителя. Убедитесь, что вы установили transition-delay в --delay переменную.
Теперь пора управлять им с помощью атрибута данных. Для этого процесс довольно прост. Мы выберем каждую опцию по очереди и установим переменную --delay соответственно.
Наконец, всплывающая подсказка теперь имеет общее время реакции. Чтобы использовать его, просто передайте свойство data-reaction родительскому тегу. Или, если хотите, вы можете указать время реакции, используя свойство style.
2. Положение всплывающей подсказки
Другое свойство, которое расширит возможности нашей всплывающей подсказки, - это свойство position. Реализуя это, мы сможем позиционировать его с помощью простого атрибута с именем data-position.
data-position будет иметь 4 варианта: снизу, вверху, слева и справа. Нижний - это значение по умолчанию, и на основе значения атрибута мы размещаем его соответственно следующим образом:
Теперь, когда эта функция реализована, вы можете использовать ее, добавив атрибут data-position к тегу.
Спасибо, ребята, что прочитали. Вы можете найти полный исходный код здесь. Надеюсь, вам понравилась статья, и теперь у вас есть некоторое представление о возможностях и мощи CSS. Мы будем создавать удивительные вещи только с помощью CSS. Если вам понравилось, не забудьте аплодировать, а если есть что добавить, оставьте комментарий.
Увидимся в следующей истории!
Для дальнейшего чтения:
Больше контента на plainenglish.io
