Как делается с помощью css всплывающая подсказка

Приветствую вас, уважаемые читатели этого блога. Вот стало интересно мне, как сделать в css всплывающую подсказку, более продвинутую и интересную, чем то, что предлагает нам стандартный html.

Как делается подсказка стандартными средствами

Простая всплывающая подсказка появляется, если у элемента есть атрибут title и на него наведен курсор. Но выглядит она не очень интересно, а оформить через css ее никак нельзя, так как это по сути не элемент. Поэтому я вам предлагаю сделать по-другому.

Сами создаем описание элементов

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

В этом нам могут помочь data-атрибуты, которые появились в HTML5 и являются частью этой спецификации. Эти атрибуты можно задавать любым тегам, главное начинать атрибут с data-, а дальше можно писать произвольное имя, только не используйте русские буквы. В значении атрибута можно использовать любые символы.

Итак, давайте создадим блок с нашей картинкой.

<div class = "city" data-title = "Город"><img src = "city.jpg"></div>

Я дам ему классу city чтобы легко обратиться к нему через css, также мы прописали data-атрибут, в который сохранили значение “Город”. В сам блок вставлена картинка.

Реализуем появление новой подсказки

Что мы сделали? Мы указали браузеру, что при наведении на блок city у него должен появиться псевдоэлемент after, в котором должно находиться значение атрибута data-title этого же элемента. Функция attr() позволяет взять текст из значений атрибутов. В данном случае она возьмет “Город”.

При наведении на картинку будет появляться это слово, а если убрать курсор – оно будет резко исчезать. Пока все выглядит очень плохо, самое время добавить стили. Итак, давайте для начала добавим кое-что для самого блока.

Сделаем его блочно-строчным, чтобы он не занимал все место в строке, а также зададим ему относительное позиционирование – теперь псевдоэлемент after в нем можно двигать с помощью абсолютного позиционирования (смотрите здесь об этом свойстве).

Наконец, пришло время оформить сам псевдоэлемент. Я написал для него вот такие стили, сейчас все подробно объясню:

К правилам мы добавили абсолютное позиционирование, чтобы двигать элемент в пределах его родителя, а не отношению ко всему окну браузера (предварительно задав относительное позиционирование родителю).

Координатами left и bottom указываем браузеру сдвинуть подсказку в левый нижний угол. Далее задаем параметры внешнего вида – цвет фона (здесь с помощью rgba выбран полупрозрачный цвет), цвет текста, выравнивание, шрифт, размер, отступы.

Последним параметром я написал ширину 100%, чтобы подсказка растянулась на все пространство своего родительского контейнера city. Протестируем нашу работу – наведите курсор на картинку и вы увидите поясняющий текст к ней на зеленом полупрозрачном фоне. Неплохо вроде, да?

В общем, вот таким вот интересным методом я сегодня делюсь с вами. Надеюсь, вы найдете где применить данный прием. Единственный его недостаток – подсказка выскакивает резко, а не плавно, а также она не исчезает, если курсор наведен на картинку. Но по-моему это не очень серьезные проблемы, которые легко компенсируются тем, что нам не понадобилось никаких скриптов, да и реализация оказалась очень простой.

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