Подсказки являются отличным способом для вывода дополнительной информации с помощью простого наведения курсора мыши на текст или изображение. Их можно использовать, например, для вывода названий картинок, описания ссылок, или любой другой информации, которая может быть полезна пользователю вашего ресурса. И ломать дизайн шаблон не требуется. В данном уроке мы рассмотрим, как создать простые подсказки с помощью HTML и CSS, которые будут выводить содержание атрибута title для ссылки. Создадим простую разметку для ссылки. Определим для нее атрибут title, в котором будет содержаться текст подсказки, и класс: 1 <a title="Текст подсказки." class="tooltip">Ссылка на полезный ресурс</a> Зададим базовый стиль для класса tooltip: 1 .tooltip{ 2 display: inline; 3 position: relative; 4 } Теперь подсказка будет выводится в одну строку со ссылкой с использованием относительного позиционирования. Теперь определим скругленные углы для блока подсказки и позиционируем ее сверху ссылки: 01 .tooltip:hover:after{ 02 background: #333; 03 background: rgba(0,0,0,.8); 04 border-radius: 5px; 05 bottom: 26px; 06 color: #fff; 07 content: attr(title); 08 left: 20%; 09 padding: 5px 15px; 10 position: absolute; 11 z-index: 98; 12 width: 220px; 13 } Мы используем псевдо-класс :hover, который выбирает элемент при наведении на него курсора мыши, и псевдо-класс :after, который добавляет содержание после выбранного элемента. Фон устанавливается частично прозрачным, а для браузеров, которые не поддерживают формат цвета RGBA, устанавливаем серый цвет фона. Закругленные углы создаются с помощью атрибута border-radius. Цвет текста делаем белым. В завершение, мы позиционируем блок подсказки и добавляем отступ. Кроме определения стилей и позиционирования задаем свойство content: 1 content: attr(title); Данное свойство позволяет вставлять содержание, которое может быть строкой, или атрибутом элемента. В данном случае используем атрибут title ссылки. Теперь при наведении курсора на ссылку выводится наша подсказка сверху. Но есть одна проблема - информация выводится дважды: в нашей подсказке и браузером по умолчанию. Для устранения требуется поменять наш код HTML: 1 <a href="#" title="Текст подсказки."><span title="Дополнительная информация">Ссылка на полезный ресурс</span></a> Мы поместили тег ссылки в тег span с собственным атрибутом title. Теперь браузер выведет содержание атрибута title тега span при наведении курсора на ссылку. Для завершения нужно добавить стрелочку внизу подсказки. Используем псевдо-класс :before и стили для рамки: 01 .tooltip:hover:before{ 02 border: solid; 03 border-color: #333 transparent; 04 border-width: 6px 6px 0 6px; 05 bottom: 20px; 06 content: ""; 07 left: 50%; 08 position: absolute; 09 z-index: 99; 10 } Для создания стрелки мы использовали трюк с рамкой:устанавливаем цвет рамки слева и справа прозрачным и управляем шириной рамки. Также стрелка позиционируется под подсказкой.