Простенький Tooltip на CSS3 для uCoz
827материалов
228тем на форуме
3004комментария
6158пользователей

Простенький Tooltip на CSS3 для uCoz


Описание:

Случалось ли такое, что необходимо написать какие-то пояснения к определенному слову, но места не хватает? Для этого применяются всплывающие подсказки, а работают они следующим образом: при наведении курсора на определенное слово или элемент на странице появляется всплывающая подсказка, в которой даются некоторые пояснения. Это очень удобно использовать, например, на форме регистрации, возможно вы уже видели такие подсказки, и в этом материале я расскажу как создать такие легкие и красивые подсказки на 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>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 12.03.2016 в 16:00
Материал просмотрен: 1154 раза
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо

1 комментарий


Hlebushek1
Hlebushek1 @Hlebushek1 13.03.2016 00:451
+2
Классно, у меня уже есть такой вид, но только он от ucoz
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта