X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 12468 переглядів

  • Дизайн та розробка сайту

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

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

Изменение, создание, всплывающих подсказок 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;}

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 13, в среднем: 4.2 из 5
Читайте також