Всплывающие подсказки от Webo4ki
827материалов
228тем на форуме
3003комментария
6151пользователь

Всплывающие подсказки от Webo4ki


Описание:

Сегодня мы будем создавать всплывающие подсказки на CSS. Всплывающие подсказки — это то, что можно увидеть при наведении курсора, например на ссылку, если в атрибуте title содержится ее описание. Всплывающая подсказка может применяться как для ссылок, так и для изображений. Представляю Вашему вниманию 4 простеньких оформлений для всплывающих подсказок от Webo4ki. Подсказка сделана чисто на CSS, поэтому сильно не будет нагружать страницу, но конечно если вы не по наставляете их в одном месте сто штук))

Установка:

1) В нужное место вставляем HTML-Код:
Код
<div class="wTitle">Наведи на меня <div class="wTip"><div class="wText wColor">Всплывающие подсказки из «TITLE» by Webo4ka.Ru</div><div class="wTreug wColor2"></div></div>       
       </div>

2) И подключаем CSS-Код:
Код
.wTitle {position:relative; cursor:help;}       
       .wTitle .wTip {position:absolute; bottom:10px; left:0px; display:none;}       
       .wTitle:hover .wTip {display:block;}       
       .wText {border-radius:3px; max-width:220px; height:auto; padding:8px 10px; color:#fff; text-align:justify;}       
       .wTreug {border-bottom:8px solid transparent; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid rgba(0, 0, 0, 0.8); width:0; height:0; margin-left:8px;}       
       .wColor {background:rgba(0, 0, 0, 0.8);}       
       .wColor2 {border-top:8px solid rgba(0, 0, 0, 0.8);}

Настройки: 
тут
Код
.wColor {background:rgba(0, 0, 0, 0.8);}

и тут
Код
.wColor2 {border-top:8px solid rgba(0, 0, 0, 0.8);}
Меняем цвет всплывающей подсказки

А тут:
Код
position:absolute; bottom:10px; left:0px;
меняем отображение подсказки.

Настройка цвета, для тех кто не шарит:

Чёрный
Код
.wColor {background:rgba(0, 0, 0, 0.8);}       
       .wColor2 {border-top:8px solid rgba(0, 0, 0, 0.8);}

Красный
Код
.wColor {background:rgba(255, 0, 0, 0.8);}       
       .wColor2 {border-top:8px solid rgba(255, 0, 0, 0.8);}

Синий
Код
.wColor {background:rgba(70, 150, 255, 0.8);}       
       .wColor2 {border-top:8px solid rgba(70, 150, 255, 0.8);}

Зелёный
Код
.wColor {background:rgba(180, 210, 60, 0.8);}       
       .wColor2 {border-top:8px solid rgba(180, 210, 60, 0.8);}

ЗАКАЗАТЬ УСТАНОВКУ

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

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

2 комментария


avatar
на адаптивном сайте где нет мобильной версии текст из всплывающего окна просто выводится на странице, возможно как-то заблокировать подсказку с мобильных устройств? или есть другое решение?
Admin
Домнин Роман @Admin 20.05.2016 18:222
0
Добавьте код верхнюю часть сайта
Код
<?if($USER_AGENT_PDA$)?>.wTitle {display:none;}<?endif?>
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта