Красивые всплывающие подсказки с помощью 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. Вы получите качественный и надежный хостинг по выгодным тарифам.
Комментарии (144)
когда говоришь добавить в 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 по высоте текущего элемента.
Не срабатывает для элементов, которые были добавлены позже. Например по клику.
Предлагаю, как-то так
Может быть, кому-то и не нравятся подсказки как всплывающие окна, но всё же меня они прельщают тем, что информация бывает полезной. Иногда смотришь, но не находишь в нужном месте искомое, а тут вылетает подсказка, на которую невольно обращаешь внимание, и понимаешь, что там то, что надо. Поэтому не стоит их игнорировать, лучше их воплощать в реальность.
спасибо огромное !