Главная › JavaScript

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

144 комментария

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

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

Смотрите также

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...

Добавляем кнопку «Google +1» в панель от Share42.com

68 комментариев

На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка «Google ...

Цифровые часы на чистом CSS и jQuery

41 комментарий

Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, ...

Динамическое подключение jQuery

58 комментариев

С целью дальнейшего развития моего сервиса-скрипта Share42.com я искал способ динамического подключения фреймворка jQuery непосредственно в коде JavaScript. Нашел красивое решение, которое выполняет одновременно 2 задачи: Проверяет, подключен ли уже на странице jQuery. Если не подключен, ...

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

  1. alik
    10 лет 7 месяцев назад

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

    • Евгений Иванов
      7 лет 1 месяц назад / ответ на коммент alik

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

  2. Алексей
    10 лет 4 месяца назад

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

  3. Алексей
    10 лет 4 месяца назад

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

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

  4. Владимир
    10 лет 3 месяца назад

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

    • Dimox
      10 лет 3 месяца назад / ответ на коммент Владимир

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

      • Владимир
        10 лет 3 месяца назад / ответ на коммент Dimox

        Вот пример: 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. Владимир
    10 лет 3 месяца назад

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

  6. Александр
    10 лет 1 месяц назад

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

  7. Михаил
    10 лет -1 месяц назад

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

    <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 срабатывает вниз, в небольшом по высоте блоке, а текст соответственно сползает далеко за пределы дива по высоте.
    Склоняюсь к мысли, что что-то конфликтует.

    • Михаил
      10 лет -1 месяц назад / ответ на коммент Михаил

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

      <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>  
...........
      • Dimox
        10 лет -1 месяц назад / ответ на коммент Михаил

        Покажите лучше живой пример. Этот код мне ни о чем не говорит.

        • Михаил
          10 лет -1 месяц назад / ответ на коммент Dimox

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

          • Dimox
            10 лет -1 месяц назад / ответ на коммент Михаил

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

            • Михаил
              10 лет -1 месяц назад / ответ на коммент Dimox

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

              • Dimox
                10 лет -1 месяц назад / ответ на коммент Михаил

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

              • Alex
                7 лет 3 месяца назад / ответ на коммент Михаил

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

  8. atatat
    8 лет назад

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

    • atatat
      8 лет назад / ответ на коммент atatat

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

      $(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. Елена Зенкова
    6 лет 10 месяцев назад

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

  10. Rem
    6 лет 5 месяцев назад

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

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