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

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

От автора: оказывается, я влюблен в 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;
}

Я избежал использования атрибута 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;
}

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

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

Автор: David Walsh

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree