Применение CSS attr и content для создания подсказки

Дата публикации: 2013-07-09

От автора: оказывается, я влюблен в content и attr CSS; я недавно писал о том, как можно в общем применять эти свойство и выражение, как выполнить в CSS счетчики и воспользоваться ими для локализации. Я хотел бы поделиться с вами несколькими методами применения выражения attr и свойства content для назначения стилей всплывающим подсказкам — тултипам.

Подсказка 1: Альтернатива атрибуту title

Атрибут title применим для отображения простых текстовых всплывающих подсказок, но менять стили «виртуальных» тултипов нельзя. Вместо того можно заместить эти подсказки, воспользовавшись атрибутом data-tooltip и небольшим количеством CSS:

.tooltip-block:hover:after{
	border: 1px solid #fc0;
	padding: 3px 6px;
	background: #fffea1;
	content: attr(data-title);
	position: absolute;
	right: -40px;
	top: -26px;
}

.tooltip-block:hover:after{

border: 1px solid #fc0;

padding: 3px 6px;

background: #fffea1;

content: attr(data-title);

position: absolute;

right: -40px;

top: -26px;

}

Я избежал использования атрибута title, потому что не хочу отобразить ни «родной», ни пользовательский тултип. У этой стратегии имеются некоторые недостатки, о которых вам нужно знать. Вам придется хардкодить расположение всплывающей подсказки для того, чтобы у элемента с тултипом около края окна просмотра контент выходил за экран. В отдельных случаях, однако, так можно слегка оживить базовый тултип.

Подсказка 2: Обзор HTML

Я стану частенько просматривать страницу и искать не просто правильный текст и функциональность, но также убеждаться, что у элементов верные атрибуты; блестящий пример тому – обеспечение правильных ссылок HREF. Бороздить для этого исходный код надоедает, а проверка элементов занимает вечность, поэтому я применяю для отображения требуемой информации content и attr:

/* покажите гиперссылки внутри контейнера "tooltip-links" */
.tooltip-links a:after {
	content: attr(href);
	display: none;
}

.tooltip-links a:hover:after {
	display: inline-block;
}

/* покажите гиперссылки внутри контейнера "tooltip-links" */

.tooltip-links a:after {

content: attr(href);

display: none;

}

.tooltip-links a:hover:after {

display: inline-block;

}

Время от времени я отображаю содержимое, установив основную непрозрачность на 30%, иногда просто показываю нужную мне информацию при проведении мышью. Я выполнил это решение в Mozilla Developer Network в режиме редактирования, отображая сводный текст SEO с всплывающей подсказкой сверху самого текста. Простое и блестящее решение.

Не могу поверить, что так долго пренебрегал использованием attr и content. Это – отличная штука, даже когда просто помогает при разработке. Кроме того, attr и content великолепно подходят для счетчиков и локализации; а вы для чего ими пользуетесь?

Автор: David Walsh

Источник: //davidwalsh.name/

Редакция: Команда webformyself.

Метки: atr, content, css