Красивые всплывающие подсказки на сайте

Многие знают, что при наведении на некоторые элементы Веб-страниц (картинки, ссылки) после некоторой паузы под курсором появляется всплывающая подсказка — невзрачный прямоугольник с мелкими буковками. А сейчас раскрою секрет, как сделать всплывающую подсказку красивой — из опции браузера превратить её в элемент дизайна.

Для этого будем использовать плагин jQuery «Easy Tooltip». Обращаю внимание, что это не плагин WP или какого-либо другого движка. Этот плагин универсальный — его можно использовать на любом движке. Но потребуется внести небольшие изменения в код темы.

Первым делом качаем сам плагин:

Easy Tooltip - плагин jQuery (930.0 B). Скачали: 269 раз

Распаковываем и обнаруживаем в архиве всего один файл — tooltip.js. Можете его раскрыть и посмотреть для интереса. Как всегда, не рекомендую использовать стандартный блокнот Windows, а пользоваться расширенным блокнотом Notepad++, в противном случае работоспособность плагина после правки не гарантирована.

В этом файле есть несколько интересных строк, а именно:

// default configuration properties
var defaults = {
	xOffset: 10,
	yOffset: 35,
	tooltipId: "easyTooltip",
	clickRemove: false,
	content: "",
	useElement: ""
};

Это базовые настройки плагина. Можете ничего не менять, там всё настроено как надо.

  • xOffset — смещение подсказки влево от курсора (в пикселях);
  • yOffset — смещение вверх от курсора;

Остальные настройки позволяют осуществлять более сложные махинации со всплывающей подсказкой. Если интересно — читайте документацию на английском языке (ссылка на неё дана в начале файла tooltip.js).

Этот файл необходимо загрузить на ваш сайт. Рекомендую загрузить его в папку темы оформления сайта. Затем файл подключается при помощи следующих строчек:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://pavluha.net/wp-content/themes/pavluha-theme/tooltip.js"></script>

Эти строчки следует прописать между тегами <head> и </head> страниц сайта. Если используете WP, следует в админке выбрать пункт меню «Внешний вид — Редактор», затем выбрать в редакторе «Заголовок (header.php)». Может называться «Шапка» — зависит от перевода.

В первой строчке подключается механизм обработки jQuery-инструкций, а во второй строке подключаем сам плагин. Там у меня указан путь: https://pavluha.net/wp-content/themes/pavluha-theme/ — но вы должны указать свой. Как видно, путь состоит из адреса сайта и пути к папке с темой оформления сайта (для движка WP это «wp-content/themes» плюс имя папки темы).

И последний штрих — задания стиля оформления всплывающих подсказок. Для этого надо открыть файл стилей темы оформления сайта (для WP: «Внешний вид — Редактор», выбрать «Список стилей (style.css)», добавлять строки можно в любом месте файла, но не нарушая существующих там конструкций). Я использую следующие стили:

#easyTooltip{
	padding: 3px 10px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	font: bold 16px "Trebuchet MS";
	color: #000;
	background: #fff;
	border: 1px solid #000;
	border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
	z-index: 900;
}

Можете использовать мои стили, тогда ваши всплывающие подсказки будут выглядеть как у меня. Некоторые подсказки по этим стилям:

  • строки 3-6 устанавливают прозрачность подсказок для разных браузеров (здесь 80%);
  • строки 7-9: шрифт, цвет текста подсказок, цвет фона;
  • 10 — граница (размер, вид, цвет);
  • 11 — задаёт полукруглые края для разных браузеров, радиус закругления — 7 пикселей.

Наслаждайтесь. ;)

Запись опубликована в рубрике Web-мастеринг с метками , , . Короткая ссылка для добавления в закладки: Красивые всплывающие подсказки на сайте.

25 Responses

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.