Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

Красивае подсказки на CSS3

Basic ones

On dimensioned elements

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

Все стили и параметры подсказок задаются в CSS таблице, файл hint1.css. Если Вы хотите что-то поменять Вам нужно, воспользовавшись функцией [Скачать с сервера], скачать данный файл и внести необходимые изменения.

Внутри тега <BODY> - </BODY> там где у Вас будут ссылки.

<center>
        <h3>Basic ones</h3>
    		<p><a href="#" class="hint--top" data-hint="Подсказка 1">Подсказка сверху.</a></p>
            <p><a href="#" class="hint--right" data-hint="Подсказка 2">Подсказка справа</a></p>
            <p><a href="#" class="hint--bottom" data-hint="Подсказка 3">Подсказка снизу</a></p>
            <p><a href="#" class="hint--left" data-hint="Подсказка 4">Подсказка слева</a></p>

<h3>On dimensioned elements</h3>

<h3>Color based types</h3>

<p><a href="#" class="hint--top  hint--error" data-hint="Подсказка цветная сверху">Цветная сверху.</a></p>
			<p><a href="#" class="hint--right  hint--warning" data-hint="Подсказка цветная справа">Цветная справа!</a></p>
			<p><a href="#" class="hint--bottom  hint--info" data-hint="Подсказка цветная снизу">Цветная снизу.</a></p>
            <p><a href="#" class="hint--left  hint--success" data-hint="Подсказка цветная слева">Цветная слева.</a></p>

<h3>Extra</h3>
        <p><a href="#" class="hint--right  hint--always" data-hint="Подсказка указатель">Подсказка ввиде указателя.</a></p>
        <p><a href="#" class="hint--right  hint--success  hint--rounded" data-hint="Подсказка цветная с закругленными угдами">Цветная справа с закруглёнными углами.</a></p>

<h3>Effects</h3>

<p><a href="#" class="hint--right  hint--bounce" data-hint="Подсказка с эффектом Bounce">Подсказка с эффектом выезда и исчезновения</a></p>

</center>

Сама подсказка находится в атрибуте data-hint="". В атрибуте class задаются параметры подсказки.
hint--top - подсказка сверху
hint--right - подсказва справа
hint--bottom - подсказка снизу
hint--left - подсказка слева
hint--error - цвет фона подсказки красный
hint--warning - цвет фона подсказки коричневый
hint--info - цвет фона подсказки синий
hint--success - цвет фона подсказки зелёный
hint--always - постоянная подсказка-указаиель
hint--rounded - закругление углов блока подсказки
hint--bounce - подсказка с эффектом при выезде и исчезновении.
Задавая в теге class нужные наборы параметров Вы подбираете нужный вам вариант подсказки.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.