Как изменить стили атрибута Title в теге ссылки

Опубликовано: 24.09.2019, 23:37. Категория: Верстка и CSS

Сегодня рассмотрим несколько примеров стилизации атрибута title (всплывающей подсказки) в теге ссылки с помощью CSS и без использования Javascript.

С появлением CSS3 мы можем стилизовать атрибут title с помощью свойства content.

a[title]:hover:after {
	content: attr(title);
}

Однако именно браузером определяется стиль и позиция отображения атрибута title. Веб-страница не может применить стили к всплывающей подсказке на основе данного атрибута.

Мы можем создать псевдо-всплывающую подсказку с помощью CSS и пользовательского атрибута, например, data-title, который представляет собой метод хранения пользовательских данных в элементах DOM/HTML. Существует несколько способов доступа к таким атрибутам: использование атрибутов data-*.

Пример 1

Использование атрибута data-title без дополнительного CSS-класса.

[data-title] {position: relative}
[data-title]:after {
	content: attr(data-title);
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
	position: absolute;
	top: 2em;
	left: 30%;
	padding: 2px 8px;
	font-size: 13px;
	font-weight: 300;
	white-space: nowrap;
	color: #444;
	background-image: -moz-linear-gradient(top, #fff, #ddd);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
	background-image: -webkit-linear-gradient(top, #fff, #ddd);
	background-image: -o-linear-gradient(top, #fff, #ddd);
	background-image: -ms-linear-gradient(top, #fff, #ddd);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	-o-box-shadow: 0 0 5px #ccc;
	-ms-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
}
[data-title]:hover:after {
	opacity: 1;
	visibility: visible;
	-moz-transition: all 0.2s ease-out 0.5s;
	-webkit-transition: all 0.2s ease-out 0.5s;
	-o-transition: all 0.2s ease-out 0.5s;
	-ms-transition: all 0.2s ease-out 0.5s;
	transition: all 0.2s ease-out 0.5s;
}

Демо

Формат ссылки

<a href="#" data-title="Заголовок ссылки">Текст ссылки</a>

Пример 2

Использование атрибута data-title с дополнительным CSS-классом.

.jn-tooltip {
	display: inline;
	position: relative;
}
.jn-tooltip:hover:after {
	content: attr(data-title);
	z-index: 999;
	position: absolute;
	bottom: 26px;
	left: 30%;
	width: 195px;
	padding: 7px 15px 10px 15px;
	font-size: 13px;
	font-weight: 300;
	color: #fff;
	background-color: #444;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
}
.jn-tooltip:hover:before {
	content: "";
	z-index: 1000;
	position: absolute;
	bottom: 20px;
	left: 50%;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #444 transparent;
}

Демо

Формат ссылки

<a class="jn-tooltip" href="#" data-title="Заголовок ссылки">Текст ссылки</a>

В качестве заключения

Собственно, адаптировать один из примеров под стили вашего сайта будет достаточно легкой задачей.

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