Изменение, создание, всплывающих подсказок title с помощью CSS

Віталий

7 років ago

Изменение, создание, всплывающих подсказок title с помощью CSS

Доброго времени суток. 🙂

Тем кто хоть раз верстал и сталкивался с html известно что у ссылок есть параметр title, по умолчанию он выводит всплывающую подсказку. В этой статье я расскажу о том, как изменить внешний вид таких подсказок и настроить их на свой вкус и под ваш сайт. Такие подсказки помогут вам выделить ссылки. Сделать красивые подсказки к ссылкам, которые имеют, например, вид иконок. Самое главное, что сделать это можно используя обычный CSS, не применяя никаких скриптов. Вы просто внесете изменения в существующие подсказки. Пример того что у вас может получиться можете посмотреть ниже:

Чтобы сделать так же, вам естественно изначально нужно ссылкам прописать атрибут title. Если вы это уже сделали давно, то остается добавить лишь стили.

[title]{
	position:relative;
}
[title]:after{
	content:attr(title);
	color:#fff;
	background:#3c0;
	padding:10px;
	position:absolute;
	left:-9999px;
	opacity:0;
	bottom:100%;
	white-space:nowrap;
	-webkit-transition:0.25s linear opacity;
	transition:0.25s linear opacity;
}
[title]:hover:after{
	left:5px;
	opacity:1;
}

Данные стили сделают всплывающие подсказки такие как в первой ссылки. Но если вы захотите, чтобы у разных ссылок были разные стили, то можно добавить классы ссылкам или если они уже есть, просто прописать им стили.Например по примеру у второй ссылки класс - tw_link, а у третей th_link.

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

.tw_link[title]:after{background:#f60;}
.th_link[title]:after{background:#333;}

Теперь вторая ссылка оранжевая, а третья черная. Таким же образом, можно менять размеры каждой выноске и тд. Все зависит от вашей фантазии.

На этом все, спасибо за внимание. 🙂

Exit mobile version