Как сделать красивую подсказку для ссылок. Всплывающие подсказки для ссылок

Подсказка для ссылки зачастую помогает пользователю быстрее ориентироваться на сайте, а значит и получать быстрее нужную информацию. Стандартная подсказка выглядит тускло и при этом приходится ждать её появления порядка 3 секунд. В этой статье я опишу как сделать красивую подсказку для ссылок, которая появляется моментально при наведение курсора мышки на ссылку. Пример работы такой подсказки реализован на этом сайте.

Стоит сказать, что для этого существует множество способов реализации, но почти все они предполагают большую нагрузку из-за множества эффектов. Мой способ прост тем, что практически не грузит браузер и не требует загрузок картинок. Перейдем непосредственно к описанию.

1. Скачайте следующий архив: podskazka.rar.

2. В архиве будет лежать единственный файлик podskazka.js:

3. Включите этот файл к себе на сайт (можете его переименовать). Для этого в любом месте сайта напишите:

<script type="text/javascript" language="JavaScript" src="podskazka.js"></script>

Настройка
В самом верху файлика podskazka.js будут следующие строки:

var qTipTag = "a,input,span";
var qTipX = 10;
var qTipY = 25;

В параметре qTipTag указывается для каких html тегов будет работать подсказка. В qTipX задается отступ всплывающей подсказки по оси Х, в qTipY по оси У. Эти параметры можно менять и делать так, как Вам удобно. Я остановился именно на этих значениях.

4. Теперь нужно прописать стиль для нашей подсказки, чтобы она выводилась в красивой рамке. Для этого отройте Ваш файл со стилями .css (стили) и пропишите в конце:

div#qTip {
	padding: 3px;
	border: 1px solid #666;
	display: none;
	background: #e6fff5;
	color: #000;
	font-size: 14px;
	text-align: left;
	position: absolute;
	z-index: 1000;
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	}

Здесь есть четыре важных параметра:

border: 1px solid #666 - задание толщины рамки и её цвета
background: #e6fff5 - задание фона рамки
font-size: 14px - размер шрифта
color: #000 - цвет шрифта

Эти параметры нужно настраивать конкретно под Вашу цветовую гамму на сайте (см. коды html цветов для сайта).

После этого на сайте у всех ссылок где прописан атрибут title будет всплывать подсказка с описанием, которую вы укажите.

← Перейти в каталог html уроков и советов

Как сделать красивую подсказку для ссылки