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

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

Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим очередным небольшим jQuery-скриптом, который поможет украсить ваш веб-ресурс. Идею я подсмотрел на сайте электронного бухгалтера ...

Комментарии (144)

  1. когда говоришь добавить в CSS имеешь в виду style.css?? там целая папка css.
    и этот спан куда приклеить тоже в сss???

    • Спасибо автору за очень полезную статью. Она нужная и достаточно понятная… Скажите, пожалуйста, у Вас есть скайп? Просто мне эти знания очень нужны, но я не имею права на ошибку… Если есть такая возможность, я прошу Вашей помощи онлайн… Еще раз спасибо за знания…

  2. Здравствуйте. У Вас в скрипте используются class и в табличке стилей соответственно, как поменять class на id? В таблице понятно как а в скипте как?

  3. Вместо span.jQtooltip сделайте #jQtooltip. Но в этом случае скрипт сработает только для первой подсказки на странице.

    А если сделать span#jQtooltip то всё работает

  4. Здравствуйте!
    Очередное прекрасное творение. :) Долго искал разные варианты, но Ваш просто отличный. Единственная проблема у меня возникла, похоже не срабатывает .jQtooltip div. Т.е. окно с текстом выглядит явно не таким, как должно быть по описанию в css. Не могу понять, как такое может быть. .jQtooltip { работает, а .jQtooltip div.
    В чем может быть проблема?

    • Покажите живой пример. Без него можно только гадать.

      • Вот пример: http://www.vseoglazah.ru/eye-diseases/hypermetropia/ Там прямо в начале, к примеру, слово «аккомодации».
        Вчера несколько часов пытался разобраться, но так и не понял. Такое ощущение, что не срабатывает скрипт, т.к. если я его убираю, то ничего не меняется. Проблема в том, что всплывающий текст в div не оборачивается.
        В tips.js поместил Ваш код. В CSS всё добавил, но почему то не работает.
        jQuery подключил:

        <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js" charset="UTF-8"></script>

        Много вариантов перебрал, Ваш больше всего понравился, но почему то не срабатывает. :(

  5. Вот единственная проблема. Когда подсказка на последнем слове в строке и пояснение большое по объему, то текст не влезает весь, т.е. обрезается с правой стороны. Как бы смещать влево всплывающее окно с текстом в подобных ситуациях?

  6. Здравствуйте, скажите пожалуйста как заменить вопросительный знак на восклицательный или какой-то другой или вообще убрать его? Просто я реализовал такие подсказки для выведения тайтлов из ссылок и вопросительный знак там ни к чему, помогите пожалуйста, обыскал весь код скрипта и интернет, не нашел ничего такого и не могу понять как поменять или убрать… Примерно думаю что это с el.find как то связано… Помогите пожалуйста!

  7. Здравствуйте! Что то мучаюсь который час, никак не добьюсь результата. Сильно не пинайте за код, я всего лишь «любитель», и делаю для себя…
    В общем, вот часть кода —

    <table style="margin-bottom:3px;" width="597px" class="table2" >
    <tbody>
    <tr onclick="show(1,18);">
    
    <td style="color:#036; background-color:#e4edfc;" colspan="2">1. Заголовок</td>
    
    </tr>
    <tr id="id1" style="display:none">
    <td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д.</span></td>
    <td>еще одна ячейка</td>
    </tr>
    <tr id="id2" style="display:none">
    td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д.</span></td>
    <td>еще одна ячейка</td>
    </tr>
    ...........
    

    Таблица на основе этого скрипта — http://neverlex.com/cat/programming/price-list-with-javascript/
    Проблема. При наведении курсора, .jQtooltip div срабатывает вниз, в небольшом по высоте блоке, а текст соответственно сползает далеко за пределы дива по высоте.
    Склоняюсь к мысли, что что то конфликтует..

    • Извиняюсь, наспех отредактировал пример своего кода выше , допустил ошибки. правильный вот:

      <table style="margin-bottom:3px;" width="597px" class="table2" >  
      <tbody>  
      <tr onclick="show(1,18);">  
        
      <td style="color:#036; background-color:#e4edfc;" colspan="2">1. Заголовок</td>  
        
      </tr>  
      <tr id="id1" style="display:none">  
      <td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д."</span>Текст</td>  
      <td>еще одна ячейка</td>  
      </tr>  
      <tr id="id2" style="display:none">  
      td><span class="jQtooltip" title="Вспывающая подсказка, описание и т.д."</span>Текст</td>  
      <td>еще одна ячейка</td>  
      </tr>  
      ...........  
      • Покажите лучше живой пример. Этот код мне ни о чем не говорит.

        • Тестовый пример, в прайсе первый раздел, и первый подпункт с применением подсказки http://fr54382.tw1.ru/price.html Проблему нашел..
          Проблема с высотой у .jQtooltip div, если проставлять в пикселях — открывает, но пиксели под каждый объем текста не просчитаешь. Так же если отменить у строки с идентификатором id1 свойство display:none; — элемент подсказки работает как надо, но не скрывается строка.

          • Вот в том и дело, что корректно будет работать, только если подсказка находится не в скрытом элементе.

            • Сейчас прочитал на 2 странице комментарии — оказывается я не первый кто с этим столкнулся. Жаль. Хм.. т.е. получается строка наследует все свойства на вложенные элементы, этим самым вызывая этот баг?

              • Суть в том, что для div’а со подсказкой, перед тем, как он отобразиться, определяется его высота. Но, когда элемент с подсказкой находится в элементе, у которого свойство display: none, в этом случае у div’а со подсказкой высота определяется неправильно, из-за чего и возникает такой баг.

              • предлагаю вынести див в body и рассчитывать смещение top по высоте текущего элемента.

  8. Не срабатывает для элементов, которые были добавлены позже. Например по клику.

    • Предлагаю, как-то так

      $(document).on({
              mouseenter: function () {
                $(this).find('div')
                  .clearQueue()
                  .delay(200)
                  .animate({width: width + 20, height: height + 20}, 200).show(200)
                  .animate({width: width, height: height}, 200);
              },
              mouseleave: function () {
                $(this).find('div')
                  .animate({width: width + 20, height: height + 20}, 150)
                  .animate({width: 'hide', height: 'hide'}, 150);
                  if ($(this).children().is(':hidden')) el.find('div').clearQueue();
              }
            }, ".tooltip");
  9. Может быть, кому-то и не нравятся подсказки как всплывающие окна, но всё же меня они прельщают тем, что информация бывает полезной. Иногда смотришь, но не находишь в нужном месте искомое, а тут вылетает подсказка, на которую невольно обращаешь внимание, и понимаешь, что там то, что надо. Поэтому не стоит их игнорировать, лучше их воплощать в реальность.

  10. спасибо огромное !

Ваш комментарий