Бешеный конкурс!
12:29
Автор: Рубрика: CSS-рецепты 5 комментариев

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

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

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

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

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

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

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

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

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

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

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

.city:hover:after {
content: attr(data-title);
}

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

.city{
position: relative;
display: inline-block;
}

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

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

.city:hover:after {
content: attr(data-title);
position: absolute;
left: 0; bottom: 0;
background: rgba(0,156,19,0.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 5px 0;
width: 100%;
}

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

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

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

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

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

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

5 комментариев
  • Нина

    Здравствуйте,Миша! В поисках ответа на вопрос просмотрела много сайтов,но в примере все вставляют одно слово, а мне надо несколько строк с переносом, типа четверостишье. Все, что напишем в data-title, выводится в подсказку «как есть», br и pre не работает, тоже выводится,как текст. Если есть идеи, подскажите, очень надо

    2016-11-23 в 10:06 | Ответить
    • Михаил

      Сделать можно по-другому, но придется использовать javascript/jquery

      2016-11-25 в 10:00 | Ответить
  • Александр Каратаев

    Интересный способ. Правда я делаю всплывающую подсказку иным способом. Применяю к некоторому тексту. В любом случае тот или иной вариант бывают востребованы.

    2016-02-21 в 2:25 | Ответить
  • Евгений

    Здравствуйте! Спасибо за интересную статью! Я думаю, что об этом должно узнать как можно большее число человек. Если хотите, я могу поделиться с вами секретами продвижения вашего блога и увеличения числа ваших постоянных читателей;)Заходите в гости.
    Успехов!

    2016-02-21 в 10:38 | Ответить
  • Дмитрий

    Интересная информация! Спасибо!

    2016-02-18 в 1:51 | Ответить