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

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

Для этого будем использовать плагин 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="http://pavluha.net/wp-content/themes/pavluha-theme/tooltip.js"></script>

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

В первой строчке подключается механизм обработки jQuery-инструкций, а во второй строке подключаем сам плагин. Там у меня указан путь: http://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

  1. Надюша говорит:

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

  2. Константин говорит:

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

  3. Albork говорит:

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

    • Pavluha.Net говорит:

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

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

  4. albork говорит:

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

    • Pavluha.Net говорит:

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

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

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

  5. Алексей говорит:

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

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

  6. Александр говорит:

    Не работает

  7. Антон говорит:

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

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

    • Pavluha.Net говорит:

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

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

      • Антон говорит:

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

        • Pavluha.Net говорит:

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

          • Антон говорит:

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

  8. Рамиль говорит:

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

    Спасибо.

    • Pavluha.Net говорит:

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

  9. Рамиль говорит:

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

    Спасибо!

    • Pavluha.Net говорит:

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

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

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

  10. Рамиль говорит:

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

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

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

    Сайт maya21122009.narod.ru

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

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

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

    • Pavluha.Net говорит:

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

  11. Рамиль говорит:

    Спасибо!

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

  12. Марина говорит:

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

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

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

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

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

    Спасибо.

    • Pavluha.Net говорит:

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

  13. pushkin32 говорит:

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

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

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

    • Pavluha.Net говорит:

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

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

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

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