Как создать простую всплывающую подсказку (tooltip) на CSS3
Поиск

Как создать простую всплывающую подсказку (tooltip) на CSS3

Nikel, 01.05.2019
Всплывающие подсказки — отличный способ показать пользователю больше информации, когда он наводит курсор на изображение или текст. Их сфера применения очень широка: они могут использоваться, например, для показа подписей к изображениям или  длинных  ссылок или любой полезной информации, которая улучшила бы пользовательский интерфейс вашего сайта, не вторгаясь в дизайн.

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

Давайте начнем с создания простой разметки: нам понадобится тег ссылки a. Нужно указать для нее атрибут title, который будет содержимым всплывающей подсказки, и назначить ссылке класс .tooltip:

Следующим шагом является создание стилей для нашего класса .tooltip, задающих относительное позиционирование. Ссылка представляет собой родительский контейнер для  after, который и будет отображаться как всплывающая подсказка при наведении.

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

В этом коде мы используем селектор :hover, который показывает подсказку при наведении мыши и псевдоэлемент :after, который вставляет содержимое после  элемента tooltip.

Настраиваем внешний вид подсказки. Указываем черный фон с непрозрачностью 80%, а для браузеров, которые не поддерживают цвета RGBA, задаем темно-серый фон. Слегка закругленные углы создаем с помощью атрибута border-radius, а цвет текста мы устанавливаем белый. Наконец, расположим окно подсказки слева от ссылки и добавим небольшие отступы.

Помимо стиля и позиционирования, мы установили свойство content:

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

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

Однако у нас есть одна проблема: информация о заголовке отображается дважды: один раз во всплывающей подсказке и один раз браузером. Чтобы исправить это внесем небольшое изменение в  HTML:

Что мы сделали здесь? Поместили внутри ссылки тег span с собственным атрибутом title. Поскольку этот атрибут пуст, браузер ничего не отобразит , когда мышка будет наведена на тег a.

Осталось добавить стрелку в нижней части всплывающей подсказки,чтобы сделать ее более стильной. Мы создадим ее с помощью селектора   :before и  стилей границ и расположим так, чтобы она находилась в нижней части окна подсказки.

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

Таким образом, у нас теперь есть простая всплывающая подсказка, содержащая в себе информацию из title того элемента, на который мы наводим мышку. В качестве такого элемента также можно  использовать image alt или даже просто поместить в подсказку свой собственный текст.