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

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

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 5, в среднем: 5 из 5

Опубликовано 3 комментария

  • Иоанна
    Комментариев: 1

    Сделать всплывающую подсказку при наведении на картинку, оформление подсказки должно управляться через стили. Всплывающая подсказка, добавляемая к изображениям через атрибут title тега img , является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и её настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.

    • Виталий
      Комментариев: 493

      Странный комментарий, догадался проверить его на поисковике - это текст из статьи 6 летней давности. Всем специалистам из htmlbook, прошу учитывать даты и свежесть материала 🙂 А то вы еще статьи из МЕЗОЗОЯ вытяните и расскажите что интернета не существует 🙂
      Результат перед глазами, а вы пишите невозможно 🙂

  • Алексей
    Комментариев: 1

    А как сделать чтобы у этой подсказки на css вывести треугольник, ну то есть стрелку к тексту?

Добавить комментарий для Виталий Отменить ответ

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

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