Подсказка для ссылки (title)
Всем привет, в этом материале будет показано что нужно сделать чтобы сделать всплывающие подсказки к ссылкам на чистом CSS, без использования jQuery и прочего. Простая темная всплывающая подсказка к ссылке! Перейдем к собственно установке.
В CSS добавляем:
Чтобы вызвать эту подсказку html код следующий:
Если по каким-то причинам подсказка находится под какими-то элементами сайта измените z-index на большее условие.
В CSS добавляем:
Код
.tooltip {display:inline;position:relative;top:70px;}
.tooltip:hover:after {background:#333;background:rgba(0,0,0,.8);border-radius:5px;bottom:26px;color:#fff; content:attr(title);left:20%;padding:5px 15px;position:absolute;z-index:4;width:220px;}
.tooltip:hover:before {border: solid;border-color:#333 transparent; border-width:6px 6px 0 6px;bottom:20px;content:"";left:50%;position:absolute;z-index:5;}
.tooltip:hover:after {background:#333;background:rgba(0,0,0,.8);border-radius:5px;bottom:26px;color:#fff; content:attr(title);left:20%;padding:5px 15px;position:absolute;z-index:4;width:220px;}
.tooltip:hover:before {border: solid;border-color:#333 transparent; border-width:6px 6px 0 6px;bottom:20px;content:"";left:50%;position:absolute;z-index:5;}
Чтобы вызвать эту подсказку html код следующий:
Код
<a href="#" title="asdasd" class="tooltip"><span>OFF</span></a>
Если по каким-то причинам подсказка находится под какими-то элементами сайта измените z-index на большее условие.
О материале:
Дата добавления: 30.06.2013 в 12:00
Материал просмотрен: 715 раз
Категория: Скрипты и модификации для uCoz
Оставлены: 0 комментария
Рейтинг материала
По мнению пользователей
4.0
Поделиться
Комментарии
0 комментариев
Навигация
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет