Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Желтые всплывающие подсказки для uCoz
21.10.2018
Желтые всплывающие подсказки для uCoz
  • 632 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 3.0 Рейтинг:
  • (Голосов: 1)
Описание:
Неплохой jQuery-скрипт, который поможет украсить ваш веб-ресурс.

Установка:

1. Этот код вставляем на всех страница(или только на тех где вы хотите чтобы у вас были эти всплывающие подсказки) перед тегом :

Код
<script type="text/javascript" src="http://7old.ru/ucoz-files/1/jquery.min.js"></script>  
<script type="text/javascript" src="http://7old.ru/ucoz-files/1/potskazki.js"></script>


2. Далее нужно добавить в CSS-файл вашего сайта следующие стили:

Код
.jQtooltip {  
  position: relative;  
  cursor: help;  
  border-bottom: 1px dotted;  
}  
.jQtooltip div {  
  display: none;  
  position: absolute;  
  bottom: -1px;  
  left: -1px;  
  z-index: 1000;  
  width: 190px;  
  padding: 8px 12px;  
  text-align: left;  
  font-size: 12px;  
  line-height: 16px;  
  color: #000;  
  box-shadow: 0 1px 3px #C4C4C4;  
  border: 1px solid #DBB779;  
  background: #FFF6BD;  
  border-radius: 2px;  
}  
.jQtooltip.mini {  
  display: inline-block;  
  vertical-align: bottom;  
  font-size: 11px;  
  width: 14px;  
  line-height: 13px;  
  text-align: center;  
  margin-left: 2px;  
  top: -2px;  
  color: #9A4D18;  
  border: 1px solid #FAD28F;  
  background: #FFF6BD;  
  border-radius: 2px;  
}


3. Теперь осталось поместить необходимый текст в тег с классом jQtooltip и атрибутом title, т.е. вот так:

Код
<span class="jQtooltip" title="текст всплывающей подсказки">текст</span>


4. Если вы желаете, чтобы вместо текста был квадратик, как на скриншоте, тогда используйте вот этот код:

Код
<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>


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

Вот, собственно, и все.
Желтые всплывающие подсказки для uCoz" title="Скачать Желтые всплывающие подсказки для uCoz бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Источник: Неизвестно
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]