Главная » Статьи » Прочее

Простая подсказка на CSS

Посмотрите ДЕМО
В 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;}

Ссылки оформляем так
Код
<a href="#" title="Простая Подсказка hawk.do.am" class="tooltip"><span title="1">Hawk.do.am</span></a>
Категория: Прочее | Добавил: slavick (04.08.2013)
Просмотров: 78 | Теги: css, простая, подсказка, на | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]