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

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

Для этого будем использовать плагин 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 ответов к “Красивые всплывающие подсказки на сайте”

Надюша:

Красота! Мне нравятся такие подсказки :)

Pavluha.Net:

Мне тоже, Надюша

Константин:

Давно искал такую вещь. Спасибо автору.

Albork:

В Internet Explorer края подсказки не закругленные — не смотрится. (пересесть на другой браузер — не предлагать )

Pavluha.Net:

Albork, я не буду предлагать вам другой браузер. Я вам предложу смотреть квадратные углы. :) Тупо ради одного браузера (не самого популярного), который ещё не принял CSS3, дописывать килобайты кода-костыля.

albork:

Насчет популярности браузеров рекомендую ознакомиться здесь: marketshare.hitslink.com/...are.aspx?qprid=0

Pavluha.Net:

Не знаю, что это за данные. В Рунете (на который рассчитан мой сайт), такая статистика:

www.liveinternet.ru/stat/...html?period=week

Но вы не переживайте. Когда-нибудь разработчики IE примут к сведению CSS3, и у вас тоже будут круглые углы ;)

Алексей:

Пользуюсь Joomla 1.5 , не могу разобраться где прописать style.css

Если нетрудно, подскажите.

Александр:

Не работает

Антон:

Подсказки красивые, но есть пара минусов.

К примеру, у тебя на RSS-ссылке есть такая подсказка — и она скачет, так как утыкается в правую границу браузера — ужимается и ужимается до бесконечности. Это решаемо?

Pavluha.Net:

Конечно, решаемо. Надо задать подсказке фиксированную ширину посредством CSS (как вариант — минимальную ширину, меньше которой она не ужмётся).

Ужимается она не до бесконечности, а до ширины самого длинного слова в подсказке. Считаю, что это фишка, а не баг

Антон:

прописываю минимальную ширину — и он ее сохраняет, но тогда окошко подсказки уходит за пределы окна...

Pavluha.Net:

Понял. Вам бы, наверное, хотелось, чтобы в случае, когда подсказка не вмещается в зону справа, она бы отображалась влево. Что ж, технически задача реализуема, а практически — лень в коде ковыряться, лучше я смирюсь

Антон:

все равно благодарю за внимание)

Рамиль:

Здравствуйте.Вопрос.Можно ли сделать чтобы подсказка на определенное время появлялась сама над элементом сайта не наводя на элемент курсор мыши?

Спасибо.

Pavluha.Net:

Здравствуйте, Рамиль. Пожалуй, можно. Но всё равно появление подсказки надо привязывать к какому-то действию: например, страница полностью загружена или при скроллинге объект появился в зоне видимости

Рамиль:

А как это сделать?Как привязать к полностью загруженной странице?

Спасибо!

Pavluha.Net:

Создаёте слой, скажем, #text, оформляете его соответствующим образом (CSS): кроме прочего, задаёте абсолютное позиционирование и смещение относительно того элемента, у которого будет отображаться подсказка. Изначально скрываем. Для анимации подсказки нужен примерно такой код:

(function($) { $('#text').animate({opacity:.85}, 100); setTimeout(function() {$('#text').animate({opacity:0}, 100);}, 5000); });

Подсказка появится сразу после загрузки страницы и скроется через 5 секунд

Рамиль:

Спасибо Вам большое.

Но если честно я ничего не понял.

Я создал сайт для дочки на народе.Сделал все через htm не используя css.В нем я еще не разобрался.

Сайт maya21122009.narod.ru

Сайт сделан без каких либо надписей.Просто повесил gif анимацию на ссылки.И не все понимают что нужно нажать на анимацию чтобы перейти на страницу.

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

Спасибо за Вашу помощь!

Pavluha.Net:

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

Рамиль:

Спасибо!

Будем ждать :)

Марина:

Здравствуйте! У меня к Вам вопрос-просьба. подскажите пожалуйста, как сделать Во всплывающую подсказку вставить действующую ссылку. И как это все оформить. т е Всплывает подсказка а в ней есть ссылка ( ну например на другой сайт), Главное, как вставить ССЫЛКУ в подсказку.

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

Для чего нужно — очень хочется научиться это делать и для красоты тоже;)))

Если можно, то конкретно, я начинающая.

Очень надеюсь на ответ.

Спасибо.

Pavluha.Net:

Наверное, надо воспользоваться каким-нибудь плагином всплывающих подсказок

pushkin32:

Интересно а где пишется сама подсказка?

У меня например при наведении курсора подсказка не появляется?

Если можно помогите разобраться. Спасибо!

Pavluha.Net:

А Пушкин его знает, почему у вас при наведении курсора подсказка не появляется. У меня всё так, как на картинке в посте.

Добавить комментарий для Марина Отменить ответ

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