Как сделать простые подсказки на CSS3

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

В данном уроке мы рассмотрим, как создать простые подсказки с помощью HTML и CSS, которые будут выводить содержание атрибута title для ссылки.

Создадим простую разметку для ссылки. Определим для нее  атрибут title, в котором будет содержаться текст подсказки, и класс:

<a title="Текст подсказки." class="tooltip">Ссылка на полезный ресурс</a>

Зададим базовый стиль для класса tooltip:

.tooltip{

    display: inline;

    position: relative;

}

Теперь подсказка будет выводится в одну строку со ссылкой с использованием относительного позиционирования. Теперь определим скругленные углы для блока подсказки и позиционируем ее сверху ссылки:

.tooltip:hover:after{

    background: #333;

    background: rgba(0,0,0,.8);

    border-radius: 5px;

    bottom: 26px;

    color: #fff;

    content: attr(title);

    left: 20%;

    padding: 5px 15px;

    position: absolute;

    z-index: 98;

    width: 220px;

}

Мы используем псевдо-класс :hover, который выбирает элемент при наведении на него курсора мыши, и псевдо-класс :after, который добавляет содержание после выбранного элемента. Фон устанавливается частично прозрачным, а для браузеров, которые не поддерживают формат цвета RGBA, устанавливаем серый цвет фона.

Закругленные углы создаются с помощью атрибута border-radius. Цвет текста делаем белым. В завершение, мы позиционируем блок подсказки и добавляем отступ.

Кроме определения стилей и позиционирования задаем свойство content:

content: attr(title);

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

Теперь при наведении курсора на ссылку выводится наша подсказка сверху. Но есть одна проблема - информация выводится дважды: в нашей подсказке и браузером по умолчанию. Для устранения требуется поменять наш код HTML:

<a href="#" title="Текст подсказки."><span title="Дополнительная информация">Ссылка на полезный ресурс</span></a>

Мы поместили тег ссылки в тег span с собственным атрибутом title. Теперь браузер выведет содержание атрибута title тега span при наведении курсора на ссылку.

Для завершения нужно добавить стрелочку внизу подсказки. Используем псевдо-класс :before и стили для рамки:

.tooltip:hover:before{

    border: solid;

    border-color: #333 transparent;

    border-width: 6px 6px 0 6px;

    bottom: 20px;

    content: "";

    left: 50%;

    position: absolute;

    z-index: 99;

}

Для создания стрелки мы использовали трюк с рамкой:устанавливаем цвет рамки слева и справа прозрачным и управляем шириной рамки. Также стрелка позиционируется под подсказкой.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
Перевел: Сергей Фастунов