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

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

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

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

alik
10 лет 6 месяцев назад

когда говоришь добавить в CSS имеешь в виду style. css? там целая папка css.
и этот спан куда приклеить тоже в сss???
- Евгений Иванов
  7 лет назад / ответ на коммент alik
  
  Спасибо автору за очень полезную статью. Она нужная и достаточно понятная… Скажите, пожалуйста, у Вас есть скайп? Просто мне эти знания очень нужны, но я не имею права на ошибку… Если есть такая возможность, я прошу Вашей помощи онлайн… Еще раз спасибо за знания…
Алексей
10 лет 3 месяца назад

Здравствуйте. У Вас в скрипте используются class и в табличке стилей соответственно, как поменять class на id? В таблице понятно как, а в скипте как?
- Dimox
  10 лет 3 месяца назад / ответ на коммент Алексей
  
  Вместо span.jQtooltip сделайте #jQtooltip. Но в этом случае скрипт сработает только для первой подсказки на странице.
Алексей
10 лет 3 месяца назад

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

Здравствуйте!
Очередное прекрасное творение. :) Долго искал разные варианты, но Ваш просто отличный. Единственная проблема у меня возникла, похоже не срабатывает. jQtooltip div. Т. е. окно с текстом выглядит явно не таким, как должно быть по описанию в css. Не могу понять, как такое может быть. .jQtooltip { работает, а. jQtooltip div.
В чем может быть проблема?
- Dimox
  10 лет 2 месяца назад / ответ на коммент Владимир
  
  Покажите живой пример. Без него можно только гадать.
  - Владимир
    10 лет 2 месяца назад / ответ на коммент 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>
    Много вариантов перебрал, Ваш больше всего понравился, но почему-то не срабатывает. :(
    - Dimox
      10 лет 2 месяца назад / ответ на коммент Владимир
      
      Неправильно запускаете скрипт, оттого и не работает. Правильно так:
      (function($){ $(function() { тут код скрипта }) })(jQuery)
      Моя ошибка, забыл указать это в статье.
      - Владимир
        10 лет 2 месяца назад / ответ на коммент Dimox
        
        Вот же я тормоз :) Спасибо большое! Теперь всё отлично. Спасибо Вам за отличный сайт и Вашу дружелюбность. :)
Владимир
10 лет 2 месяца назад

Вот единственная проблема. Когда подсказка на последнем слове в строке и пояснение большое по объему, то текст не влезает весь, т. е. обрезается с правой стороны. Как бы смещать влево всплывающее окно с текстом в подобных ситуациях?
- Dimox
  10 лет 2 месяца назад / ответ на коммент Владимир
  
  Нужно убрать overflow: hidden; у родительского div’а, тогда не будет обрезаться. Смещать влево я не знаю, как.
Александр
10 лет назад

Здравствуйте, скажите пожалуйста как заменить вопросительный знак на восклицательный или какой-то другой или вообще убрать его? Просто я реализовал такие подсказки для выведения тайтлов из ссылок и вопросительный знак там ни к чему, помогите пожалуйста, обыскал весь код скрипта и интернет, не нашел ничего такого и не могу понять как поменять или убрать… Примерно думаю что это с el. find как-то связано… Помогите пожалуйста!
- Dimox
  10 лет назад / ответ на коммент Александр
  
  Не знаю, где вы там нашли вопросительный знак, его нет ни в статье, ни в примере.
  - Александр
    10 лет назад / ответ на коммент Dimox
    
    С вопросительным знаком становится указатель мыши при наведении, можно ли убрать эту замену курсора или поменять на обычный или лучше вид курсора как при наведении на ссылку? Буду очень благодарен если поможете! Вчера весь интернет перерыл, но так и не нашел как это сделать…
    - Dimox
      10 лет назад / ответ на коммент Александр
      
      Нужно было сразу сказать, что речь про курсор. Удалите из стилей эту строчку:
      cursor: help;
      - Александр
        10 лет назад / ответ на коммент Dimox
        
        Спасибо большое и за скрипт и за помощь!!! Все отлично работает! Почему-то в ксс и не смотрел (тормоз =)), думал что это в коде скрипта… Еще раз спасибо!
Михаил
9 лет 10 месяцев назад
Здравствуйте! Что-то мучаюсь который час, никак не добьюсь результата. Сильно не пинайте за код, я всего лишь «любитель», и делаю для себя…
В общем, вот часть кода —
```
<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 срабатывает вниз, в небольшом по высоте блоке, а текст соответственно сползает далеко за пределы дива по высоте.
Склоняюсь к мысли, что что-то конфликтует.
- Михаил
  9 лет 10 месяцев назад / ответ на коммент Михаил
  Извиняюсь, наспех отредактировал пример своего кода выше, допустил ошибки. правильный вот:
```
<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
    9 лет 10 месяцев назад / ответ на коммент Михаил
    
    Покажите лучше живой пример. Этот код мне ни о чем не говорит.
    - Михаил
      9 лет 10 месяцев назад / ответ на коммент Dimox
      
      Тестовый пример, в прайсе первый раздел, и первый подпункт с применением подсказки fr54382.tw1.ru/price.html Проблему нашел.
      Проблема с высотой у. jQtooltip div, если проставлять в пикселях — открывает, но пиксели под каждый объем текста не просчитаешь. Так же если отменить у строки с идентификатором id1 свойство display: none; - элемент подсказки работает как надо, но не скрывается строка.
      - Dimox
        9 лет 10 месяцев назад / ответ на коммент Михаил
        
        Вот в том и дело, что корректно будет работать, только если подсказка находится не в скрытом элементе.
        
        Михаил
        9 лет 10 месяцев назад / ответ на коммент Dimox
        
        Сейчас прочитал на 2 странице комментарии — оказывается я не первый кто с этим столкнулся. Жаль. Хм. т. е. получается строка наследует все свойства на вложенные элементы, этим самым вызывая этот баг?
        
        Dimox
        9 лет 10 месяцев назад / ответ на коммент Михаил
        
        Суть в том, что для div’а со подсказкой, перед тем, как он отобразиться, определяется его высота. Но, когда элемент с подсказкой находится в элементе, у которого свойство display: none, в этом случае у div’а со подсказкой высота определяется неправильно, из-за чего и возникает такой баг.
        
        Alex
        7 лет 2 месяца назад / ответ на коммент Михаил
        
        предлагаю вынести див в body и рассчитывать смещение top по высоте текущего элемента.

atatat

7 лет 11 месяцев назад

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

atatat

7 лет 11 месяцев назад / ответ на коммент 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");

Елена Зенкова
6 лет 9 месяцев назад

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

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

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

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

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

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

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

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

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

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