Идеален для сайтов-визиток

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

Классные подсказки у ссылок на этом сайте? Мне тоже нравятся. Они несут дополнительную информацию для посетителя и отлично выглядят.

Есть множество плагинов jQuery и отдельных скриптов для реализации всплывающих подсказок.

Как яростный любитель минимализма, я долгое время прользовался простейшим методом. Хоть сейчас эту функцию выполняет плагин фреймворка Bootstrap, о qTip расскажу.

Установка qTip

Для этого решения не нужна библиотека jQuery. Нужен только скриптик, который весит всего 2 килобайта.

Подключение скрипта

Копируйте код скрипта в файл qTip.js, забрасывайте его в папку js на сервере и вставляйте в секцию <head> вашего шаблона код:


<script type="text/javascript" src="<?= $config['sitelink'] ?>js/qTip.js"></script>

Не забудьте прописать в файле style.css оформление для всплывающей подсказки. Например, такое:


div#qTip {
	padding: 3px;
	border: 1px solid #999;
	display: none;
	background: #ececec;
	color: #000;
	text-align: left;
	font-size: 90%;
	position: absolute;
	z-index: 1000;
	opacity: 0.9;
}

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

Для этого в файле скрипта добавьте название тегов в строке:


var qTipTag = "a,label,input";

Пользуйтесь. Скрипт просто отличный.