Как создать красивую всплывающую подсказку с помощью jQuery

Как создать красивую всплывающую подсказку с помощью jQuery

В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект.

В этом нам поможет jQuery.

demosourse

С самого начала документа подключаем фреймворк:

<script src="jquery.tools.min.js"></script>  

Далее подключаем стили оформления. Как Вы видите - они находятся во внешнем файле:

<link rel="stylesheet" type="text/css" href="tooltip.css"/>

В теле документа нам понадобится следующий код:

<a href="#" id="trigger">
Move the mouse over this box to see the tooltip in action.
</a>
<!-- tooltip element -->
<div class="tooltip">
<h3>The Tooltip</h3>
<p>
<strong>A great tool for designing better layouts and more intuitive user-interfaces.</strong>
</p>
<p>
Tooltips can contain any HTML such as links, images, forms and tables.
This tooltip is vertically centered on the top edge of the trigger element.
</p>
</div>

Класс "trigger" - это видимый объект на странице, а "tooltip" - это то, что должно появится при наведении мышки.

После этого кода нам необходимо инициализировать функцию.

<script>
$.tools.addTipEffect("slidedown",

// opening animation
function() {
var opacity = this.getConf().opacity;
this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show();
},

// closing animation
function() {
this.getTip().animate({top: '+=15', opacity:0}, 300, function() {
$(this).hide().animate({top: '+=30'}, 0);
});
}
);
$("#trigger").tooltip({effect: 'slidedown'});
</script>

Все готово! Оставайтесь с нами!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.flowplayer.org
Перевел: Максим Шкурупий
Урок создан: 14 Июня 2009
Просмотров: 65106
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Июня 2009 10:00
    zimorodok
    Красивая подсказка, а хвост у нее не привязан к центру? А то когда объект находится у края поля, как будет она выглядеть? В смысле подсказка... Много таких подсказок у вас встречал. И красивые, и нужные, но когда ставил себе, вели себя тупо, т.к. ссылки, для которых они мне нудны были, находились в неудобном для них месте.
  • 15 Июня 2009 11:56
    МаксимКурочкин
    Всем привет=) я заметил некоторый баг в результате данного урока, а именно то, что в Internet Explorer 7 очень плохо отображается тень от этой подсказки, т. е. в место тени вокруг подсказки отображается огромная граница, эдак пикселов на двадцать... Я бы посоветовал Вам переделать, т. е. убрать совсем оттуда тень или просто снести урок, т. к. людей пользующихся IE7 еще достаточное количество! P. S. На будущее, старайтесь проверять на баги во всех браузерах, но можно не во всех, я вот например проверяю в Mozilla Firefox, IE7, Google Chrome, Opera. P. S. S. Удачи Вам!=)
  • 15 Июня 2009 14:10
    Диман
    Спасибо! Кстати, я нашёл шрифт, которым написан логотип сайта! Это Base 02. Скачать можно тут - http://nifa.ru/archives/112
  • 15 Июня 2009 14:26
    МаксимШкурупий
    Спасибо за рекомендации. Но урок сносить не будем!
  • 15 Июня 2009 14:53
    МаксимКурочкин
    Понятно, ну может быть это и к лучшему =) может Вы тогда уберете тень в фотошопе? Ведь из-за ее неправильного отображения в IE7 получается плохая картина. P. S. Авторизуйте меня в аське, мой ник - STRELOK
  • 18 Июня 2009 17:14
    VadiS
    МаксимКурочкин, это проблема IE. Он не может отображать полупрозрачные PNG файлы. Приходится выбирать, либо "красота", либо пользователи IE. Хотя, есть и другие способы, самый простой, заменить рисунок своим (не PNG), или использовать разные хаки, которые, тоже не всегда в этом случае помогают. Обидно, когда из-за IE, нельзя толком, напрямую, реализовать задумки дизайна.
    • 3 Февраля 2011 17:14
      asizintsev
      А не легче ли сделать пользователю подсказку, на сайте если он зашел с IE типо "Извините, Вы пользуетесь морально устаревшим браузером IE. Для корректого отображения сайта используйте Mozila или Chroom"
  • 23 Июня 2009 14:56
    cobra
    Скажите пожалуйста, а как сделать так чтобы подсказка применилась не к 1 фотографи, а к 6 с разными подписями.
  • 9 Октября 2009 19:11
    tltDmitriy
    никак не могу сделать более одной подсказки на странице... первая работает, остальные ни в какую( помогите!
  • 25 Ноября 2009 12:32
    НеформатноеРадио
    Реальная проблема не получается сделать больше одной подсказки А я хотел связать её в php с гостевой книгой чтобы при наведении на имя вываливалось сообщение в связке с пхп не смог вообще отобразить, тогдапопытался размножить демо-пример тоже не вышло, не могу понять, в чем тут проблема
  • 11 Февраля 2010 18:45
    verum
    Прошу помочь: Как клонировать эту подсказку .... ну чтоб их было 2 или 3 в один ряд.... чет не че не пойму Спасибоо!
  • 28 Февраля 2010 16:37
    IgorZaz
    Хм.. У меня никогда не получалось просто добавить код и чтобы все работало - по любому надо было что-то менять. Так и здесь. Были такие же проблемы как описаны ниже: 1. прозрачность PNG . Решение: вбейте через поисковик слово unitpngfix.js - смотрите любой сайт с описанием на руском) (почему то решение которое предложено на ruseller не пошло) 2. тултип выскакивал только на 1 ссылке. Решение: сделайте скрипт Jquery внешним а в теле страницы ПОСЛЕ всех необходимых ссылок, на которые нужен тултип, впишите чтонить типа <script type="text/javascript" src="путь к вышеупомянутому скрипту"></script> . С этим я разобрался, но возникла еще проблемка))) В Мозиле ссылка на которой стоит тултип, становится неактивной... То что в самом тултипе они неактивны, это понятно, но почему сама ссылка так косячит?
  • 11 Марта 2010 22:43
    Vertkov
    МаксимШкурупий, как сделать так что-бы тултип работал на всех ссылках! (а не на одной)
  • 11 Марта 2010 22:45
    Vertkov
    IgorZaz, твоя методика не дала результатов. Если не трудно скинь мне часть кода с "сутью" сказанного на vertkov13gmail.com
  • 23 Июля 2010 17:34
    Dima
    Я ЗНАЮ КАК СДЕЛАТЬ НЕСКОЛЬКО ПОДСКАЗОК НА ОДНОЙ СТРАНИЦЕ! 1) Скрипт надо подставлять к каждой ссылке, но с изменениями <script> $.tools.addTipEffect("slidedown", // opening animation function() { var opacity = this.getConf().opacity; this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show(); }, // closing animation function() { this.getTip().animate({top: '+=15', opacity:0}, 300, function() { $(this).hide().animate({top: '+=30'}, 0); }); } ); $(".trigger").tooltip({effect: 'slidedown'}); </script> (((((((((((((((((((((((((((((((((#trigger Заменить .trigger ))))))))))))))))))))))))))))))))))))))) 2) В tooltip.css Заменить #trigger на .trigger 3) В ссылке на подсказку заменить id на class => <a href="#" id="trigger"> ЗАМЕНИТЬ НА <a href="#" class="trigger">
    • 1 Ноября 2011 18:48
      sedoi95733
      СПС, всё получилось.
  • 23 Июля 2010 17:34
    Dima
    5) <script src="jquery.tools.min.js"></script> и <link rel="stylesheet" type="text/css" href="tooltip.css"/> --------> ПОДКЛЮЧИТЬ ТОЛЬКО ОДИН РАЗ МЕЖДУ ТЕГАМИ <head></head> ВЫВОД: Попробывал в браузерах Google Safari Fairfox Opera IE - последнии версии на 23.07.2010 Google - Ругается очень мало Fairfox - Ругается очень мало Safari и IE - Ругается мало и Прозрачность заменяют на чёрный фон Opera - НЕ РУГАЕТЬСЯ ===>===>===> СПАСИБО Михайлову Диме RF9400@mail.ru
    • 20 Ноября 2010 12:59
      verum
      Dima А можно ли пример скрипта и всего остального? тобиш в рабочем виде! ПОЖАЛУЙСТА Очень нужно!!! :)
  • 6 Января 2011 16:36
    xpaco
    А как сделать что бы вниз подсказка выезжала?? Очень нужно, кто знает помогите пожалуйста. Мой icq:2950279
  • 12 Января 2011 10:44
    Rinat
    Действительно красивая подсказка.
  • 2 Мая 2011 02:52
    profesor08
    тем кто не разобрался как делать много подсказок - рано вам еще лезть в jQuery...
    • 19 Июля 2011 00:12
      SHADOWdk
      Лучше бы помог, чем умничал. Народ подскажите пожалуйста, как сделать для нескольких элементов этот tooltip. Прописывал классами вместе id, все равно не хочет работать.
    • 11 Сентября 2012 17:25
      semen_orlov
      бесят меня такие мудаки как ты... ббррр
  • 16 Октября 2011 16:33
    PHP_Мастер
    Подскажите как сделать несколько таких подсказок на одной странице сайта ???
  • 22 Июля 2013 06:12
    Lukena
    Послушайте ребята, ничего исправлять не нужно. Скрипт изначально правильный. Просто нужно немного подумать. Во-первых, в ссылке специально дан id, а не class, чтобы можно было добавлять данную подсказку сколько хотите на странице. Во-вторых, весь скрипт не нужно подставлять к каждой ссылке. В третьих, для корректного отображения всплывающего окна в браузерах, сделайте класс .tooltip без всяких теней, затемнений и "понтов". По порядку: 1) Подключаете скрипт: <script src="jquery.tools.min.js"></script> 2) В ваш главный CSS файл стилей добавляем класс (ниже пример): div.tooltip { display:none; background:#EEE; - заливка width:300px; - длина окна подсказки height:150px; - высота окна подсказки padding:20px; - отступы от краев border:3px solid #666; - обрамление окна -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; ... далее можете издеваться как хотите над стилем окна } 3) В начале вашей HTML-страницы в теге <body>, где Вам удобно, размещаете этот скрипт: <script> $.tools.addTipEffect("slidedown", // opening animation function() { var opacity = this.getConf().opacity; this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show(); }, // closing animation function() { this.getTip().animate({top: '+=15', opacity:0}, 300, function() { $(this).hide().animate({top: '+=30'}, 0); }); } ); </script> 4) Далее, в теле страницы, сами ссылки и подключаете для них подсказки: <a href=\"#\" id=\"trigger_1\">ВИДИМЫЙ ТЕКСТ 1</a> <div class=\"tooltip\">ВАША ПОДСКАЗКА 1</div> <script> $("#trigger_1").tooltip({effect: 'slidedown'}); </script> ... <a href=\"#\" id=\"trigger_2\">ВИДИМЫЙ ТЕКСТ 2</a> <div class=\"tooltip\">ВАША ПОДСКАЗКА 2</div> <script> $("#trigger_2").tooltip({effect: 'slidedown'}); </script> ... и так далее, сколько угодно! Все, больше ничего не надо. Все просто, красиво и удобно. Спасибо Ruseller.com
  • 3 Октября 2014 07:23
    D22D
    Для того, что бы выводилось МНОГО подсказок на вашем сайте: Вместо id="trigger" пропишите class="trigger". В скрипте следовательно #trigger меняете на .trigger
^ Наверх ^