Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Скрипты для uCoz [115]Графика для uCoz [11]
Шаблоны для uCoz [40]
Простенький Tooltip на CSS3
Случалось ли такое, что необходимо написать какие-то пояснения к определенному слову, но места не хватает? Для этого применяются всплывающие подсказки, а работают они следующим образом: при наведении курсора на определенное слово или элемент на странице появляется всплывающая подсказка, в которой даются некоторые пояснения. Это очень удобно использовать, например, на форме регистрации, возможно вы уже видели такие подсказки, и в этом материале я расскажу как создать такие легкие и красивые подсказки на CSS3 без использования JQuery.

Установка:
В таблицу стилей вставляете код:
Код
.tooltip{  
  display: inline;  
  position: relative;  
  }  
   
  .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: 98;  
  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: 99;  
  }


А это пример использования Tooltip:
Код
<a href="#" title="uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др. На данный момент в системе создано более миллиона сайтов. uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet. Владелец сервиса — ООО «Юкоз Медиа», Россия." class="tooltip"><span title="">ИНФОРМАЦИЯ О СИСТЕМЕ UCOZ</span></a>
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 13.03.2016 в 22:41 по МСК
Категория: Скрипты для uCoz
Просмотров: 247
Комментариев: 0
Рейтинг:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]