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

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

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

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

Дмитрий
12 лет 11 месяцев назад

Здравствуйте!
А можно ли в подсказку вставить вместе с текстом ссылку?
Подскажете как?
- Dimox
  12 лет 11 месяцев назад / ответ на коммент Дмитрий
  
  Нельзя. Только текст.
Михаил
12 лет 7 месяцев назад

Спасибо, классный скрипт! Оживляет интерфейс классно!
Марина
12 лет 7 месяцев назад

Здравствуйте! Вопрос!
А как сделать, чтоб подсказка двигалась за курсором? И в одну и в другую сторону. Если хлопотно, то хоть в одну сторону. И для начинающей, поподробнее.
Спасибо!
- Dimox
  12 лет 7 месяцев назад / ответ на коммент Марина
  
  Для этого требуется доработка скрипта.
  - Марина
    12 лет 7 месяцев назад / ответ на коммент Dimox
    
    Dimox! А это очень сложно??? :)))
    Может доработаете. У Вас очень красивые подсказки, таких больше нигде не нашла. Немного добавила им красоты и теперь вообще блеск. А если они еще будут двигаться за курсором, то радости не будет предела.
    Сделайте пожалуйста:)))
    И кстати, только у Вас на сайте все ПОДРОБНО написано и ничего не нужно мудрить, я вставила ваши скрипты и css и все отлично.
    Спасибо!
    Очень жду ответа.
    - Dimox
      12 лет 7 месяцев назад / ответ на коммент Марина
      
      Извините, у меня нет желания в этом разбираться. Вы можете поискать другие готовые скрипты с этой функцией.
      - Марина
        12 лет 7 месяцев назад / ответ на коммент Dimox
        
        Спасибо, что ответили. Очень жаль, когда человек умеет и не хочет.
        Может тогда хоть пару ссылок дадите на скрипты с этой функцией. Я долго ищу, но пока не нашла.
        В моем случае, это даже не столько для украшательства, сколько для того, что научиться этому.
        Еще раз спасибо.
        
        Dimox
        12 лет 6 месяцев назад / ответ на коммент Марина
        
        Вот примеры:
        http://cssglobe.com/lab/tooltip/01/
        http://cssglobe.com/lab/easytooltip/01.html
        http://cssglobe.com/lab/easytooltip/02.html
        http://cssglobe.com/lab/easytooltip/03.html
        
        Марина
        12 лет 6 месяцев назад / ответ на коммент Dimox
        
        Dimox!
        Большое спасибо!!!
Дмитрий
12 лет 6 месяцев назад

а почему в гугл хроме весь текст в одну строку пишется и за поля экрана вылазит, как можно исправить, подскажите
- Dimox
  12 лет 6 месяцев назад / ответ на коммент Дмитрий
  
  У вас неправильная вложенность тегов, из-за этого и некорректное отображение.
  - Дмитрий
    12 лет 6 месяцев назад / ответ на коммент Dimox
    
    а как правильно расположить их, местами поменял вроде так же.
Дмитрий
12 лет 6 месяцев назад

и подскажите как можно разместить несколько ссылок с тайтлом в этих всплывающих поясненияХ?
Андрей
12 лет 6 месяцев назад

А как сделать чтобы тултип показывался слева если курсор в другой половине экрана ?
- Dimox
  12 лет 6 месяцев назад / ответ на коммент Андрей
  
  С этим скриптом никак.
Андрей
12 лет 6 месяцев назад

Очень жаль… Будем искать …
sticky
12 лет 5 месяцев назад

Здравствуйте, спасибо Вам, скрипт шикарный. Подскажите пожалуйста, возможно ли сделать вывод подсказки при наведении на блок таблицы. Пробовал вместо спан ставить тд и дивы пихать внутрь и снаружи блока, ничего не выходит.
- Dimox
  12 лет 5 месяцев назад / ответ на коммент sticky
  
  Скрипт работает на любом теге, главное, чтобы он в скрипте был указан.
Ирина
12 лет 5 месяцев назад

Большое спасибо, получилось!!!
Правда если слово подсказки пишется на англ., появляется еще одна рамка с другими подсказками предлагающими перевод на русский. Думаю что это подарок от Firefox…
Еще раз спасибо.
Марина
12 лет 5 месяцев назад

День добрый! Прошу помощи!
Ситуация такая. Все делаю как написано выше, пока нахожусь в панели редактирования нажимая ПРОСМОТР, все подсказки отлично отображаются. Но как только выхожу из админки, т е становлюсь просто пользователем инета, подсказки не видно, пунктирная линия видна (над словом для подсказки), а самой оформленной подсказки всплывающей – НЕ ВИДНО.
Два раза меняла шаблон, несколько раз перезаливала скрипты и ничего.
Очень надеюсь на ответ.
Кстати в лисе тоже самое.
- Dimox
  12 лет 5 месяцев назад / ответ на коммент Марина
  
  Где можно посмотреть?
  - Марина
    12 лет 5 месяцев назад / ответ на коммент Dimox
    
    Ой как быстро:)))
    Вроде блог открыт, щас проверю
  - Марина
    12 лет 5 месяцев назад / ответ на коммент Dimox
    
    Dimox! Простите, забыла ссылку дать
    marinadan.blogspot.com Blogger школа
    - Dimox
      12 лет 5 месяцев назад / ответ на коммент Марина
      
      Предполагаю, что скрипт вы разместили в этом файле – https://sites.google.com/site/vseoblogger/script.js?pli=1
      Доступ к нему ограничен, поэтому подсказки и не работают.
      - Марина
        12 лет 5 месяцев назад / ответ на коммент Dimox
        
        блин
        а как быть, подскажите пожалуйста
Марина
12 лет 5 месяцев назад

вот так у меня админке отражается
Марина
12 лет 5 месяцев назад
```
<script src='https://sites.google.com/site/vseoblogger/jquery-1.7.1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/vseoblogger/script.js' type='text/javascript'/>
```
Ну и ну, никак не отражается скрипт
- Dimox
  12 лет 5 месяцев назад / ответ на коммент Марина
  
  Где-то на сайте sites.google.com нужно открыть доступ к этому файлу всем. Как это сделать, я не знаю.
  - Марина
    12 лет 5 месяцев назад / ответ на коммент Dimox
    
    Спасибо, буду “рыть” :)))
  - Марина
    12 лет 5 месяцев назад / ответ на коммент Dimox
    
    Дим, открыла доступ и все проявилось! Спасибо Вам!
    Но еще не совсем понятно к каким файлам открыт доступ и кто и что может с ними делать.
    Справка гугла пока молчит.
    Кстати по вашим советам там завела блог, чтоб заливать туда файлы.
  - Марина
    12 лет 5 месяцев назад / ответ на коммент Dimox
    
    https://accounts.google.com
    На этой странице создают сайт
    затем в приложения заливают файлы и скрипты
    а настройки сайта у меня были “недоступно никому” только автору сайта
    Когда сделала открытый доступ для всех в интернете, то все скрипты заработали
    Еще раз вам спасибо!
Олег
12 лет 4 месяца назад

Благодарю. Применил.
Виталий
12 лет 3 месяца назад

Спасибо! Я в восторге от этих подсказок. Применил, как дополнение для полей формы.
Использую атрибут placeholder, чтобы в полях отображалось: “Введите имя”, “Введите email” (неохота подписывать это вне поля – слишком много места, перегрузка для взгляда ИМХО). Но он не поддерживается старыми браузерами.
Так что подсказки в конце поля ввода – отличная подстраховка!
Где же я был, когда меня не было на Вашем блоге?! :o)
Aleksov
12 лет 2 месяца назад

Доброе время суток!
Подскажите, как установить задержку перед срабатыванием сценария скрипта таким образом, что-бы подсказка появлялась только после удержания курсора над заданным объектом заданный промежуток времени, а если удержание курсора было меньше заданного промежутка времени, скрипт не выполнялся?
- Dimox
  12 лет 2 месяца назад / ответ на коммент Aleksov
  После этой строки:
```
.clearQueue()
```
  добавьте такую:
```
.delay(1000)
```
  1000 – это 1 секунда.
  - Aleksov
    12 лет 2 месяца назад / ответ на коммент Dimox
    
    Всё-равно появляется. Идея такова, чтобы при кратковременном нахождении курсора над заданным объектом, подсказка не всплывала вообще, а сейчас она это делает просто секундой позже.
    - Dimox
      12 лет 2 месяца назад / ответ на коммент Aleksov
      
      Точно. Тогда, к сожалению, не знаю, как сделать. Самому было бы очень интересно узнать решение.
    - Dimox
      12 лет 2 месяца назад / ответ на коммент Aleksov
      
      Нашел решение. Вот весь код скрипта:
      $('span.jQtooltip').each(function() { var title = $(this).attr('title'); if (title && title != '') { $(this).attr('title', '').append('<div>' + title + '</div>'); var width = $(this).find('div').width(); var height = $(this).find('div').height(); $(this).hover( function() { $(this).find('div') .clearQueue() .delay(1000) .animate({width: width + 20, height: height + 20}, 200).show(200) .animate({width: width, height: height}, 200); }, function() { $(this).find('div') .animate({width: width + 20, height: height + 20}, 150) .animate({width: 'hide', height: 'hide'}, 150); } ).mouseleave(function() { if ($(this).children().is(':hidden')) $(this).find('div').clearQueue(); }); } })
      - Aleksov
        12 лет 2 месяца назад / ответ на коммент Dimox
        
        Большое спасибо! Это реально облегчило мне жизнь!
        
        Dimox
        12 лет 2 месяца назад / ответ на коммент Aleksov
        
        Отлично, пожалуйста!
        
        Aleksov
        12 лет 2 месяца назад / ответ на коммент Dimox
        
        Ещё один вопрос, пробовал $(‘title’).each(function() тобиш ловить всё что содержит title=”” однако такой фокус не проходит, как поступить правильно?
        
        Dimox
        12 лет 2 месяца назад / ответ на коммент Aleksov
        
        Вот так правильно:
        $('*[title]').each(function() { });
        
        Aleksov
        12 лет 1 месяц назад / ответ на коммент Dimox
        
        Доброе время суток!
        попробовал
        $('*[title]')
        -получилось что все тултипы одновременно и постоянно открыты, стоит навести на них курсор, они прячутся. Как пофиксить?
        
        Dimox
        12 лет 1 месяц назад / ответ на коммент Aleksov
        Не видя живого примера, ничего не могу сказать.
        
        Aleksov
        12 лет 1 месяц назад / ответ на коммент Dimox
        ок! вот http://test.i-stereo.ru “живой” пример.
        Код:
        (function($){$(function(){$('*[title]').each(function(){var title=$(this).attr('title'); if(title && title !=''){$(this).attr('title','').append('<div id="easyTooltip">'+ title+'</div>'); var width=$(this).find('div').width();var height=$(this).find('div').height();$(this).hover( function(){$(this).find('div').clearQueue().delay(3000).animate({width:width+20,height:height+20},200).show(200).animate({width:width,height:height},200)}, function(){$(this).find('div').animate({width:width+20,height:height+20},1000).animate({width:'hide',height:'hide'},150)}) .mouseleave(function(){if($(this).children().is(':hidden'))$(this).find('div').clearQueue();});}})})})(jQuery)
        
        Dimox
        12 лет 1 месяц назад / ответ на коммент Aleksov
        Видимо, происходит конфликт с другими скриптами. Я протестировал без прочих скриптов – у меня работает, как надо, тултипы по умолчанию не открыты.
        
        Aleksov
        12 лет 1 месяц назад / ответ на коммент Dimox
        Ок! Будем разбираться. Спасибо за помощь!
        
        Aleksov
        12 лет 1 месяц назад / ответ на коммент Dimox
        вот css:
        #easyTooltip{padding:5px;border:2px #ffae00 solid;background:#fada5b;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;color:#000;font:12px Tahoma;filter:alpha(opacity=95);-moz-opacity: 0.95;-khtml-opacity: 0.95;opacity: 0.95;}
        Большое.. Нет! Огромное спасибо за участие и помощ!
Kox
12 лет -1 месяц назад

А как сделать что бы подсказка чуть быстрее выскакивала ??
- Dimox
  12 лет -1 месяц назад / ответ на коммент Kox
  Уменьшите оба числа 200 в строке:
```
.animate({width: width + 20, height: height + 20}, 200).show(200)
```
Firebreather
11 лет 7 месяцев назад
Отличная находка! :) Взял себе на вооружение…
Заметил небольшой баг – если на странице есть скрытые контейнеры (неактивные вкладки, к примеру), в которых есть тултипы, то нормально анимация работает только на активной вкладке при загрузке страницы, а на всех остальных вкладках тултипы половинятся по высоте…
Вылечилось добавлением минимальной анимационной высоты в CSS-класс: .jQtooltip div
```
height: 14px;
```
Спасибо большое за скрипт!
- Firebreather
  11 лет 7 месяцев назад / ответ на коммент Firebreather
  
  Э-э, нет, если в тултипе текста много, тогда высота не увеличивается(( В общем, это неоднозначное решение…
- Dimox
  11 лет 7 месяцев назад / ответ на коммент Firebreather
  
  Да, я тоже столкнулся с этим багом. Пока не знаю, как устранить.
Firebreather
11 лет 7 месяцев назад
Пока решил сделать разделение по подсказкам – у “мини” они однострочные, а у ссылок – многострочные :)
Для этого добавил ещё один CSS:
```
.jQtooltip.mini div { height: 14px; }
```
Так работает без косяков))
Максим
11 лет 5 месяцев назад

сейчас всплытие подсказки происходит слева направо, а как сделать наоборот?
- Dimox
  11 лет 5 месяцев назад / ответ на коммент Максим
  
  Насколько я знаю, никак.
  - Максим
    11 лет 5 месяцев назад / ответ на коммент Dimox
    
    плохо
Андрей
11 лет 4 месяца назад
Вопрос что я делаю не правильно? Решил сделать на вашем примере подсказку для изображений
В скрипте
```
'span.jQtooltip'
```
изменил на
```
'img.jQtooltip'
```
В html пишу
```
<img class="jQtooltip" title="asdasdasd"
```
Но подсказка не работает. Вопрос что я сделал не так?
- Dimox
  11 лет 4 месяца назад / ответ на коммент Андрей
  
  Для изображения не сделать, потому что это непарный тег.

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

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

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

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

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

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

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

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