Как изменить стили атрибута Title в теге ссылки
Сегодня рассмотрим несколько примеров стилизации атрибута 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. Однако не забывайте о том, что любые подключаемые скрипты увеличивают "вес" страницы и, тем самым, замедляют скорость загрузки сайта.
