jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery
Внедряем всплывающие подсказки на jQuery. Скачиваем JavaScript библиотеку для всплывающих подсказок - http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/.
Для того чтобы использовать плагин, нужно в <head> страницы подключить библиотеку jQuery (если не подключена), плагин Dimensions (если надо) и сам Tooltip.
Например:
<script type="text/javascript" src="js/jquery-compressed.js"></script> <script type="text/javascript" src="js/jquery.dimensions.js"></script> <script type="text/javascript" src="js/jquery.tooltip.min.js"></script>
Примечание. Все необходимые файлы находятся в архиве с библиотекой.
Дописываем после строки 40:
...
$.tooltip = {
blocked: false,
defaults: {
track: true,
delay: 0,
fade: false,
showURL: false,
extraClass: "",
top: 15,
left: 15,
id: "tooltip",
bodyHandler: function() {
return $(this).attr('tip');
},
timer: 1000
},
block: function() {
$.tooltip.blocked = !$.tooltip.blocked;
}
};
...
Атрибут 'tip' будет содержать текст всплывающей подсказки.
В CSS дописываем:
.tooltip {
color:#008d0c;
cursor:pointer;
}
#tooltip {
position: absolute;
border: 1px #008d0c solid;
padding: 6px;
background-color: white;
z-index: 101;
color: #008d0c;
}
#tooltip h3, #tooltip div { margin: 0; }
Дальше в контенте, где надо подсветить подсказку обрамляем её:
<span class="tooltip" tip="досл: проницательный, хитроумный">sutil</span>
Рабочий пример смотрите на learnsongs.ru в тексте песни Noelia - Tú с переводом. Загляните и в биографию Ноэлии.
Источник: loco.ru
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
Другие статьи по этой теме:
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Разделитель тысяч в эффекте наматываемого счётчика jquery countTo (05.04.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015)
- Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation) (20.08.2015)
- Несколько функций в body onload (08.03.2013)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery (08.12.2012) ← вы тут
- Team Sense: Многопользовательский календарь, заменяем радиокнопки на чекбоксы в выборе преподавателей. Массивы в Javascript. (06.12.2012)
- Team Sense: В календарь-расписание уроков добавлено разделение по преподавателям, которым присвоены свои цвета. (04.12.2012)
- CodeIgniter не передаёт $this->uri->segment(3) в функцию контроллера (передача переменной PHP->JavaScript->PHP) (28.11.2012)
- Случаи возникновения ошибки в IE: "Предполагается наличие идентификатора, строки или числа" (Expected identifier, string...) (23.11.2012)
- Воюем с форматом даты в JavaScript. Приведение формата даты в поле input в календаре системы TeamSense к более красивому виду. (18.11.2012)
- Хороший тон: Если у пользователя отключен Javascript в браузере или устаревшая версия браузера (09.08.2012)
- Русификация FullCalendar (13.01.2012)
- Yii: Красивенький и чистенький JavaScript плавно прокручивает страницу до якоря и делает лёгкий откат (22.04.2012)
Комментарии (0)
Подпишитесь на 
RSS комментариев к этой статье.
RSS комментариев к этой статье.
