Красивые всплывающие подсказки на сайте
Многие знают, что при наведении на некоторые элементы Веб-страниц (картинки, ссылки) после некоторой паузы под курсором появляется всплывающая подсказка — невзрачный прямоугольник с мелкими буковками. А сейчас раскрою секрет, как сделать всплывающую подсказку красивой — из опции браузера превратить её в элемент дизайна.
Для этого будем использовать плагин jQuery «Easy Tooltip». Обращаю внимание, что это не плагин WP или какого-либо другого движка. Этот плагин универсальный — его можно использовать на любом движке. Но потребуется внести небольшие изменения в код темы.
Первым делом качаем сам плагин:
Распаковываем и обнаруживаем в архиве всего один файл — 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 пикселей.
Наслаждайтесь. 
25 ответов к “Красивые всплывающие подсказки на сайте”
Красота! Мне нравятся такие подсказки
Мне тоже, Надюша
Давно искал такую вещь. Спасибо автору.
В Internet Explorer края подсказки не закругленные — не смотрится. (пересесть на другой браузер — не предлагать )
Albork, я не буду предлагать вам другой браузер. Я вам предложу смотреть квадратные углы.
Тупо ради одного браузера (не самого популярного), который ещё не принял CSS3, дописывать килобайты кода-костыля.
Насчет популярности браузеров рекомендую ознакомиться здесь: marketshare.hitslink.com/...are.aspx?qprid=0
Не знаю, что это за данные. В Рунете (на который рассчитан мой сайт), такая статистика:
www.liveinternet.ru/stat/...html?period=week
Но вы не переживайте. Когда-нибудь разработчики IE примут к сведению CSS3, и у вас тоже будут круглые углы
Пользуюсь Joomla 1.5 , не могу разобраться где прописать style.css
Если нетрудно, подскажите.
Не работает
Подсказки красивые, но есть пара минусов.
К примеру, у тебя на RSS-ссылке есть такая подсказка — и она скачет, так как утыкается в правую границу браузера — ужимается и ужимается до бесконечности. Это решаемо?
Конечно, решаемо. Надо задать подсказке фиксированную ширину посредством CSS (как вариант — минимальную ширину, меньше которой она не ужмётся).
Ужимается она не до бесконечности, а до ширины самого длинного слова в подсказке. Считаю, что это фишка, а не баг
прописываю минимальную ширину — и он ее сохраняет, но тогда окошко подсказки уходит за пределы окна...
Понял. Вам бы, наверное, хотелось, чтобы в случае, когда подсказка не вмещается в зону справа, она бы отображалась влево. Что ж, технически задача реализуема, а практически — лень в коде ковыряться, лучше я смирюсь
все равно благодарю за внимание)
Здравствуйте.Вопрос.Можно ли сделать чтобы подсказка на определенное время появлялась сама над элементом сайта не наводя на элемент курсор мыши?
Спасибо.
Здравствуйте, Рамиль. Пожалуй, можно. Но всё равно появление подсказки надо привязывать к какому-то действию: например, страница полностью загружена или при скроллинге объект появился в зоне видимости
А как это сделать?Как привязать к полностью загруженной странице?
Спасибо!
Создаёте слой, скажем, #text, оформляете его соответствующим образом (CSS): кроме прочего, задаёте абсолютное позиционирование и смещение относительно того элемента, у которого будет отображаться подсказка. Изначально скрываем. Для анимации подсказки нужен примерно такой код:
(function($) { $('#text').animate({opacity:.85}, 100); setTimeout(function() {$('#text').animate({opacity:0}, 100);}, 5000); });Подсказка появится сразу после загрузки страницы и скроется через 5 секунд
Спасибо Вам большое.
Но если честно я ничего не понял.
Я создал сайт для дочки на народе.Сделал все через htm не используя css.В нем я еще не разобрался.
Сайт maya21122009.narod.ru
Сайт сделан без каких либо надписей.Просто повесил gif анимацию на ссылки.И не все понимают что нужно нажать на анимацию чтобы перейти на страницу.
Может посмотрите и подскажите на одном примере как мне это сделать что бы над анимацией появлялась подсказка.
Спасибо за Вашу помощь!
Красивый сайт. Ничего не обещаю, поскольку после новогодних праздников много дел накопилось. Но, если будет лень работать, посмотрю, что можно сделать для этого сайта
Спасибо!
Будем ждать
Здравствуйте! У меня к Вам вопрос-просьба. подскажите пожалуйста, как сделать Во всплывающую подсказку вставить действующую ссылку. И как это все оформить. т е Всплывает подсказка а в ней есть ссылка ( ну например на другой сайт), Главное, как вставить ССЫЛКУ в подсказку.
Каким-то неведомым мне способом у меня подсказка выплывает и я могу переместить на нее мышку и скопировать содержимое всплывающей подсказки, и если будет ссылка то и нажать на ссылку.
Для чего нужно — очень хочется научиться это делать и для красоты тоже;)))
Если можно, то конкретно, я начинающая.
Очень надеюсь на ответ.
Спасибо.
Наверное, надо воспользоваться каким-нибудь плагином всплывающих подсказок
Интересно а где пишется сама подсказка?
У меня например при наведении курсора подсказка не появляется?
Если можно помогите разобраться. Спасибо!
А Пушкин его знает, почему у вас при наведении курсора подсказка не появляется. У меня всё так, как на картинке в посте.