Красивые всплывающие подсказки с помощью jQuery
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим очередным небольшим jQuery-скриптом, который поможет украсить ваш веб-ресурс.
Идею я подсмотрел на сайте электронного бухгалтера «Эльба«. Там приятный и удобный интерфейс, и мне очень понравились всплывающие подсказки, которые присутствуют повсюду.
Я хотел было просто взять из исходников сайта код скрипта, который реализует это дело, но не тут-то было. Там у них столько разных скриптов, собранных в одну кучу (не знаю, как это правильно называется на профессиональном языке), что выудить оттуда что-то конкретное мне было затруднительно.
Поэтому я взял и написал свой скрипт, который делает примерно то же самое. Я знаю, что есть уже множество готовых решений, но мне интереснее самому написать скрипт с нуля, чтобы в очередной раз попрактиковаться с jQuery.
Демонстрация
Пример вы можете наблюдать как на сайте Share42.com, так и на специально созданной странице, где в исходнике присутствует только то, что необходимо для работы скрипта.
Установка
Код скрипта выглядит следующим образом:
(function($){
$(function() {
$('span.jQtooltip').each(function() {
var el = $(this);
var title = el.attr('title');
if (title && title != '') {
el.attr('title', '').append('<div>' + title + '</div>');
var width = el.find('div').width();
var height = el.find('div').height();
el.hover(
function() {
el.find('div')
.clearQueue()
.delay(200)
.animate({width: width + 20, height: height + 20}, 200).show(200)
.animate({width: width, height: height}, 200);
},
function() {
el.find('div')
.animate({width: width + 20, height: height + 20}, 150)
.animate({width: 'hide', height: 'hide'}, 150);
}
).mouseleave(function() {
if (el.children().is(':hidden')) el.find('div').clearQueue();
});
}
})
})
})(jQuery)
Сохраните его в файл с расширением .js, например, scripts.js и подключите к сайту перед тегом </head>, не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код сайта добавляется такой код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ПУТЬ_ДО_ФАЙЛА_НА_ВАШЕМ_САЙТЕ/scripts.js"></script>
Далее нужно добавить в CSS-файл вашего сайта следующие стили:
.jQtooltip {
position: relative;
cursor: help;
border-bottom: 1px dotted;
}
.jQtooltip div {
display: none;
position: absolute;
bottom: -1px;
left: -1px;
z-index: 1000;
width: 190px;
padding: 8px 12px;
text-align: left;
font-size: 12px;
line-height: 16px;
color: #000;
box-shadow: 0 1px 3px #C4C4C4;
border: 1px solid #DBB779;
background: #FFF6BD;
border-radius: 2px;
}
Теперь осталось поместить необходимый текст в тег <span> с классом jQtooltip и атрибутом title, т.е. вот так:
<span class="jQtooltip" title="текст всплывающей подсказки">текст</span>
Если вы желаете, чтобы вместо текста был квадратик, как в примере, тогда в CSS-файл нужно добавить еще такие стили:
.jQtooltip.mini {
display: inline-block;
vertical-align: bottom;
font-size: 11px;
width: 14px;
line-height: 13px;
text-align: center;
margin-left: 2px;
top: -2px;
color: #9A4D18;
border: 1px solid #FAD28F;
background: #FFF6BD;
border-radius: 2px;
}
А html-код в этом случае будет таким:
<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>
В зависимости от своих предпочтений, вы можете поменять CSS-код на тот, который вам придется по душе. Т.е., как видите, оформление всплывающей подсказки можно сделать любым, для этого лишь нужно разбираться в CSS.
Вот, собственно, и все.
P.S. Не сомневаюсь, что скрипт можно сделать и более грамотным, но меня, в принципе, устраивает и то, что получилось.
* * *
Ищите, где разместить свой сайт в Украине? Выбирайте хостинг, проверенный временем — X-HOST. Вы получите качественный и надежный хостинг по выгодным тарифам.
Смотрите также
Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
Добавляем кнопку "Google +1" в панель от Share42.com
На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Цифровые часы на чистом CSS и jQuery
Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки ...
Динамическое подключение jQuery
С целью дальнейшего развития моего сервиса-скрипта Share42.com я искал способ динамического подключения фреймворка jQuery непосредственно в коде JavaScript. Нашел красивое решение, которое выполняет одновременно 2 задачи: Проверяет, подключен ли уже ...
Комментарии (144)
вот так у меня админке отражается
Ну и ну, никак не отражается скрипт
Где-то на сайте sites.google.com нужно открыть доступ к этому файлу всем. Как это сделать, я не знаю.
Спасибо, буду «рыть» :)))
Дим, открыла доступ и все проявилось! Спасибо Вам!
Но еще не совсем понятно к каким файлам открыт доступ и кто и что может с ними делать.
Справка гугла пока молчит.
Кстати по вашим советам там завела блог, чтоб заливать туда файлы.
https://accounts.google.com
На этой странице создают сайт
затем в приложения заливают файлы и скрипты
а настройки сайта у меня были «недоступно никому» только автору сайта
Когда сделала открытый доступ для всех в интернете, то все скрипты заработали
Еще раз вам спасибо!
Благодарю. Применил.
Спасибо! Я в восторге от этих подсказок. Применил, как дополнение для полей формы.
Использую атрибут placeholder, чтобы в полях отображалось: «Введите имя», «Введите email» (неохота подписывать это вне поля — слишком много места, перегрузка для взгляда ИМХО). Но он не поддерживается старыми браузерами.
Так что подсказки в конце поля ввода — отличная подстраховка!
Где же я был, когда меня не было на Вашем блоге?! :o)
Доброе время суток!
Подскажите, как установить задержку перед срабатыванием сценария скрипта таким образом, что-бы подсказка появлялась только после удержания курсора над заданным объектом заданный промежуток времени, а если удержание курсора было меньше заданного промежутка времени, скрипт не выполнялся?
После этой строки:
добавьте такую:
1000 — это 1 секунда.
Всё-равно появляется. Идея такова, чтобы при кратковременном нахождении курсора над заданным объектом, подсказка не всплывала вообще, а сейчас она это делает просто секундой позже.
Точно. Тогда, к сожалению, не знаю, как сделать. Самому было бы очень интересно узнать решение.
Нашел решение. Вот весь код скрипта:
Большое спасибо! Это реально облегчило мне жизнь!
Отлично, пожалуйста!
Ещё один вопрос, пробовал $(‘title’).each(function() тобиш ловить всё что содержит title=»» однако такой фокус не проходит, как поступить правильно?
Вот так правильно:
Доброе время суток!
попробовал
-получилось что все тултипы одновременно и постоянно открыты, стоит навести на них курсор, они прячутся. Как пофиксить?
Не видя живого примера, ничего не могу сказать.
ок! вот http://test.i-stereo.ru «живой» пример.
Код:
вот css:
Большое.. Нет! Огромное спасибо за участие и помощ!
А как сделать что бы подсказка чуть быстрее выскакивала ??
Уменьшите оба числа 200 в строке:
Отличная находка! :) Взял себе на вооружение…
Заметил небольшой баг — если на странице есть скрытые контейнеры (неактивные вкладки, к примеру), в которых есть тултипы, то нормально анимация работает только на активной вкладке при загрузке страницы, а на всех остальных вкладках тултипы половинятся по высоте…
Вылечилось добавлением минимальной анимационной высоты в CSS-класс: .jQtooltip div
Спасибо большое за скрипт!
Э-э, нет, если в тултипе текста много, тогда высота не увеличивается(( В общем, это неоднозначное решение…
Да, я тоже столкнулся с этим багом. Пока не знаю, как устранить.
Пока решил сделать разделение по подсказкам — у «мини» они однострочные, а у ссылок — многострочные :)
Для этого добавил ещё один CSS:
Так работает без косяков))
сейчас всплытие подсказки происходит слева направо, а как сделать наоборот?
Насколько я знаю, никак.
плохо
Вопрос что я делаю не правильно? Решил сделать на вашем примере подсказку для изображений
В скрипте
изменил на
В html пишу
Но подсказка не работает. Вопрос что я сделал не так?
Для изображения не сделать, потому что это непарный тег.
когда говоришь добавить в CSS имеешь в виду style.css?? там целая папка css.
и этот спан куда приклеить тоже в сss???
Спасибо автору за очень полезную статью. Она нужная и достаточно понятная… Скажите, пожалуйста, у Вас есть скайп? Просто мне эти знания очень нужны, но я не имею права на ошибку… Если есть такая возможность, я прошу Вашей помощи онлайн… Еще раз спасибо за знания…
Здравствуйте. У Вас в скрипте используются class и в табличке стилей соответственно, как поменять class на id? В таблице понятно как а в скипте как?
Вместо
span.jQtooltipсделайте#jQtooltip. Но в этом случае скрипт сработает только для первой подсказки на странице.А если сделать
span#jQtooltipто всё работаетЗдравствуйте!
Очередное прекрасное творение. :) Долго искал разные варианты, но Ваш просто отличный. Единственная проблема у меня возникла, похоже не срабатывает .jQtooltip div. Т.е. окно с текстом выглядит явно не таким, как должно быть по описанию в css. Не могу понять, как такое может быть. .jQtooltip { работает, а .jQtooltip div.
В чем может быть проблема?
Покажите живой пример. Без него можно только гадать.
Вот пример: http://www.vseoglazah.ru/eye-diseases/hypermetropia/ Там прямо в начале, к примеру, слово «аккомодации».
Вчера несколько часов пытался разобраться, но так и не понял. Такое ощущение, что не срабатывает скрипт, т.к. если я его убираю, то ничего не меняется. Проблема в том, что всплывающий текст в div не оборачивается.
В tips.js поместил Ваш код. В CSS всё добавил, но почему то не работает.
jQuery подключил:
Много вариантов перебрал, Ваш больше всего понравился, но почему то не срабатывает. :(
Неправильно запускаете скрипт, оттого и не работает. Правильно так:
Моя ошибка, забыл указать это в статье.
Вот же я тормоз :) Спасибо большое! Теперь всё отлично. Спасибо Вам за отличный сайт и Вашу дружелюбность. :)
Вот единственная проблема. Когда подсказка на последнем слове в строке и пояснение большое по объему, то текст не влезает весь, т.е. обрезается с правой стороны. Как бы смещать влево всплывающее окно с текстом в подобных ситуациях?
Нужно убрать
overflow: hidden;у родительского div’а, тогда не будет обрезаться. Смещать влево я не знаю, как.Здравствуйте, скажите пожалуйста как заменить вопросительный знак на восклицательный или какой-то другой или вообще убрать его? Просто я реализовал такие подсказки для выведения тайтлов из ссылок и вопросительный знак там ни к чему, помогите пожалуйста, обыскал весь код скрипта и интернет, не нашел ничего такого и не могу понять как поменять или убрать… Примерно думаю что это с el.find как то связано… Помогите пожалуйста!
Не знаю, где вы там нашли вопросительный знак, его нет ни в статье, ни в примере.
С вопросительным знаком становится указатель мыши при наведении, можно ли убрать эту замену курсора или поменять на обычный или лучше вид курсора как при наведении на ссылку? Буду очень благодарен если поможете! Вчера весь интернет перерыл, но так и не нашел как это сделать…
Нужно было сразу сказать, что речь про курсор. Удалите из стилей эту строчку:
Спасибо большое и за скрипт и за помощь!!! Все отлично работает! Почему то в ксс и не смотрел(тормоз =)), думал что это в коде скрипта… Еще раз спасибо!
Здравствуйте! Что то мучаюсь который час, никак не добьюсь результата. Сильно не пинайте за код, я всего лишь «любитель», и делаю для себя…
В общем, вот часть кода —
Таблица на основе этого скрипта — http://neverlex.com/cat/programming/price-list-with-javascript/
Проблема. При наведении курсора, .jQtooltip div срабатывает вниз, в небольшом по высоте блоке, а текст соответственно сползает далеко за пределы дива по высоте.
Склоняюсь к мысли, что что то конфликтует..
Извиняюсь, наспех отредактировал пример своего кода выше , допустил ошибки. правильный вот:
Покажите лучше живой пример. Этот код мне ни о чем не говорит.
Тестовый пример, в прайсе первый раздел, и первый подпункт с применением подсказки http://fr54382.tw1.ru/price.html Проблему нашел..
Проблема с высотой у .jQtooltip div, если проставлять в пикселях — открывает, но пиксели под каждый объем текста не просчитаешь. Так же если отменить у строки с идентификатором id1 свойство display:none; — элемент подсказки работает как надо, но не скрывается строка.
Вот в том и дело, что корректно будет работать, только если подсказка находится не в скрытом элементе.
Сейчас прочитал на 2 странице комментарии — оказывается я не первый кто с этим столкнулся. Жаль. Хм.. т.е. получается строка наследует все свойства на вложенные элементы, этим самым вызывая этот баг?
Суть в том, что для div’а со подсказкой, перед тем, как он отобразиться, определяется его высота. Но, когда элемент с подсказкой находится в элементе, у которого свойство display: none, в этом случае у div’а со подсказкой высота определяется неправильно, из-за чего и возникает такой баг.
предлагаю вынести див в body и рассчитывать смещение top по высоте текущего элемента.
Не срабатывает для элементов, которые были добавлены позже. Например по клику.
Предлагаю, как-то так
Может быть, кому-то и не нравятся подсказки как всплывающие окна, но всё же меня они прельщают тем, что информация бывает полезной. Иногда смотришь, но не находишь в нужном месте искомое, а тут вылетает подсказка, на которую невольно обращаешь внимание, и понимаешь, что там то, что надо. Поэтому не стоит их игнорировать, лучше их воплощать в реальность.
спасибо огромное !