Файлы Скрипты и модификации

Красивые всплывающие подсказки

Описание:
Очень красивый вид всплывающих подсказок.
В head:

Код
<script type="text/javascript">  
  $(function() {  
  $('.tooltip').mouseover(function(){  
  $(this).children('div').fadeIn(2000);  
  })  
  $('.tooltip').mouseout(function(){  
  $(this).children('div').fadeIn(1000);  
  })  
  $('#tooltip_content').mouseover(function(){  
  $(this).children('div').fadeOut(2000);  
  })  
  });  
  </script>


В CSS:

Код
.tooltip  
  {  
  position: relative;  
  display: inline-block;  
  text-decoration: none;  
  outline: none;  
  }  

  .tooltip div  
  {  
  visibility: hidden;  
  position: absolute;  
  bottom: 40px;  
  left: 50%;  
  z-index: 999;  
  width: 230px;  
  margin-left: -127px;  
  padding: 10px;  
  border: 2px solid #000000;  
  opacity: .9;  
  background-color: #000000;  
  -moz-border-radius: 4px;  
  border-radius: 4px;  
  cursor:auto;  
  }  

  .tooltip:hover  
  {  
  border: 0; /* IE6 fix */  
  }  

  .tooltip:hover div  
  {  
  visibility: visible;  
  }  

  .tooltip div:before,  
  .tooltip div:after  
  {  
  content: "";  
  position: absolute;  
  z-index: 1000;  
  bottom: -7px;  
  left: 50%;  
  margin-left: -8px;  
  border-top: 8px solid #000000;  
  border-left: 8px solid transparent;  
  border-right: 8px solid transparent;  
  border-bottom: 0;  
  }  
  .tooltip div:before  
  {  
  border-top-color: #000000;  
  bottom: -8px;  
  }  
  .tooltip_text {  
  color:#fff;


Пример:

Код
<a href="#" class="tooltip">  
  Слово<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>
Источник: ucozzz.3dn.ru
Загрузка данных...
Материал «Красивые всплывающие подсказки» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Наш опрос
Как Вам наш дизайн?
1264 ответа
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
Никто ещё не посетил
© 2012-2020 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz
Внимание! На сайте ведутся технические работы.
Некоторые изображения и файлы могут быть недоступны