Подсказки

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

CSS

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

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

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

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

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

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

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

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

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