Hint.css - создаем всплывающие подсказки
827материалов
228тем на форуме
3004комментария
6159пользователей

Hint.css - создаем всплывающие подсказки


Описание:

Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript. Полноценная библиотека CSS, которая содержит в себе множество различных вариантов всплывающих подсказок и не только. Имея под рукой данный инструмент, можно полностью быть уверенным, что примеров хватит на долго. Данное решение очень простое и установка не займет много времени. По желанию вы можете изменить размер текста и цвет всплывающих подсказок.

Установка:

Для начала скачиваете архив с нашего сайта и папку CSS загружаете в свой файловый менеджер

Далее подключаете стили подсказок либо на странице:
Код
<link rel="stylesheet" type="text/css" href="/css/hint.min.css">

Либо вставляете в самый вверх Вашего CSS:
Код
@import url("/css/hint.min.css");

Низ-право:
Код
<a href="javascript:void(0)" data-hint="bottom-right" class="hint--bottom-right">bottom-right</a>

Низ:
Код
<a href="javascript:void(0)" data-hint="bottom" class="hint--bottom">bottom</a>

Низ-лево:
Код
<a href="javascript:void(0)" data-hint="bottom-left" class="hint--bottom-left">bottom-left</a>

Право:
Код
<a href="javascript:void(0)" data-hint="right" class="hint--right">right</a>

Лево:
Код
<a href="javascript:void(0)" data-hint="left" class="hint--left">left</a>

Верх-право:
Код
<a href="javascript:void(0)" data-hint="top-right" class="hint--top-right">top-right</a>

Верх:
Код
<a href="javascript:void(0)" data-hint="top" class="hint--top">top</a>

Верх-лево:
Код
<a href="javascript:void(0)" data-hint="top-left" class="hint--top-left">top-left</a>

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

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

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

7 комментариев


Viktor
Виктор @Viktor 21.02.2016 15:271
+4
Классная вещь, спасибо, забираю like
Rita
Рита @Rita 22.02.2016 00:472
0
Я так понимаю в коде:
Код
<a href="javascript:void(0)" data-hint="top-right" class="hint--top-right">top-right</a>

Надо:
Код
top-right

заменить на свое название?
Ромчик
Да, все верно. Например
Код
<a href="http://uscript.pro/" data-hint="uScript.Pro – магазин скриптов uCoz" class="hint--top-left" target="_blank">uScript.Pro</a>
AlexGraur
Alex Graur @AlexGraur 22.02.2016 13:285
+3
есть проще вариант) прозрачный фон) (настроить как угодно можно) тока без стрелочек - и идет ко всем - а тут получается каждый прописывать нужно, и это очередной гемор - пока один модуль переделаешь два века пройдет) laughing поэтому я с клоняюсь к варианту более простому)
css
Код
#unitip {position:absolute; z-index:99999; max-width:200px; padding:5px 13px 7px; color:#FFF; font-size:11px; line-height:1.5; background:#000;background:rgba(0, 0, 0, 0.7); -webkit-border-radius:4px; border-radius:4px;}

js
Код
http://www.monitoringweb.ru/js/unitip.js

так как весь код просто не влазит) тоже брал где-то на сайтах подобной тематики
Затем загрузили в папку css и js
И прописываем в верхней части сайта
Код
<script type="text/javascript" src="/js/unitip.js"></script>
<link href="/css/unitip.css" rel="stylesheet" type="text/css" />

где js - папка в которой файл js и css - папка в которой файл css) тоже красиво и гемора меньше - цветовую гамму редактировать можно)<br>
Подсказки работают когда вы прописываете title, alt)
Ромчик
А причем здесь title? В этом материале речь идет о хинтах. Данный hint предназначен не для массовых подсказках, а для одиночных.
AlexGraur
Alex Graur @AlexGraur 22.02.2016 13:367
+2
Получается хинт используется для тех кто любит сайты как новогоднюю елку) Если для одиночного использования - то тут мы поставим хинт, а в другом месте другой хинт, в третьем оставим как есть - не знаю я люблю больше что все одинаково было без всяких разнотипных каверканий) Написал - авось кому пригодится) Если можешь залей к себе Js и подредактируй ссылку на js на себя) вариант как по мне не хуже чем с хинтами) Кому что нравится)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта