Подсказки

Подсказки на чистом CSS

CSS

Создание подсказок с помощью одного лишь CSS, без использования картинок или JavaScript — дело обычное.

Лично я ничего не написал на эту тему, но есть масса примеров и обучающих уроков, которые можно использовать.

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

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

По моему мнению, все CSS-подсказки должны удовлетворять следующим условиям:

Давайте посмотрим почему вышеназванные пункты имею значение.

Многие из примеров реализации подсказок на чистом CSS используют элемент span в изначально спрятанном виде.

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

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

Если требуется, чтобы подсказки корректно отображались во всех браузерах, лучше всего для ссылки использовать старый добрый атрибут «title» и забыть обо всех других вариантах.

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

Это не особая проблема, но для меня такое решение избыточно и выглядит кривовато.

Вместо использования «title», лучше вспомнить об атрибутах «data-», которые есть в HTML5 (Джон Резиг (John Resig) написал хорошую статью по этому поводу).

Вкратце, это пользовательский атрибут, создаваемый с помощью приставки «data-».

Например, что-нибудь вроде «data-tooltip» вполне сгодится, хотя можно использовать и другое название, главное, чтобы оно начиналось с «data-».

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

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

Это поможет подсказке не появляться в ненужных местах (например когда ссылка располагается на двух строках).

Чтобы решить эту проблему, некоторые используют параметр white-space: nowrap для ссылок, но я считаю, что это плохой вариант, особенно если ссылки длиннее одного-двух слов.

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

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

Понятия не имею, является ли предлагаемый вариант железобетонным.

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

CSS

► Некоторые замечания к коду:

Я использую селектор атрибута для указания только тех ссылок, которые имеют атрибут «data-tooltip»
Текст подсказки равен значению атрибута «data-tooltip»
Я использую border-bottom для подчеркивания ссылок потому, что text-decoration добавляет подчеркивание и в саму подсказку
Код работает в IE8+ и в остальных браузерах, насколько я знаю
Только Firefox анимирует псевдоэлементы, поэтому в этом браузере появляется небольшая задержка реализованная с помощью CSS Transition при переходах, что, на мой взгляд, красивее
Подсказка сделана с использованием треугольника, построенного одним лишь CSS, и бокса с закругленными углами (которые в IE8 превращаются в прямые)
Я использую visibility: hidden, но вы можете указывать display: none — даже и не знаю, что лучше
Подсказка располагается относительно верхнего левого края элемента, чтобы не развалиться, если ссылка будет на двух строках — верхний левый угол всегда находится в одном и том же месте
Расположение подсказки задано с помощью пиксельных значений, что в данном случае надежнее процентных значений
Если соберетесь менять в коде форму подсказки, возможно потребуется изменить ее расположение

Если понравилась статья не забудьте оставить Коментарии! :-)