adminvps

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

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

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

Полезные комментарии (1)
Комментарии (144)
  1. 1
    Дмитрий
    @

    Здравствуйте!
    А можно ли в подсказку вставить вместе с текстом ссылку?
    Подскажете как?

  2. 3
    Михаил

    Спасибо, классный скрипт! Оживляет интерфейс классно!

  3. 4
    Марина
    @

    Здравствуйте! Вопрос!
    А как сделать, чтоб подсказка двигалась за курсором? И в одну и в другую сторону. Если хлопотно, то хоть в одну сторону. И для начинающей, поподробнее.
    Спасибо!

  4. 11
    @

    а почему в гугл хроме весь текст в одну строку пишется и за поля экрана вылазит, как можно исправить, подскажите

  5. 14
    @

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

  6. 15
    Андрей
    @

    А как сделать чтобы тултип показывался слева если курсор в другой половине экрана ?

  7. 17
    @

    Очень жаль… Будем искать …

  8. 18
    sticky
    @

    Здравствуйте, спасибо Вам, скрипт шикарный. Подскажите пожалуйста, возможно ли сделать вывод подсказки при наведении на блок таблицы. Пробовал вместо спан ставить тд и дивы пихать внутрь и снаружи блока, ничего не выходит.

  9. 20
    Ирина
    @

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

  10. 21
    @

    День добрый! Прошу помощи!
    Ситуация такая. Все делаю как написано выше, пока нахожусь в панели редактирования нажимая ПРОСМОТР, все подсказки отлично отображаются. Но как только выхожу из админки, т е становлюсь просто пользователем инета, подсказки не видно, пунктирная линия видна (над словом для подсказки), а самой оформленной подсказки всплывающей — НЕ ВИДНО.
    Два раза меняла шаблон, несколько раз перезаливала скрипты и ничего.
    Очень надеюсь на ответ.
    Кстати в лисе тоже самое.

  11. 27
    @

    вот так у меня админке отражается

  12. 28
    @
    <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'/>

    Ну и ну, никак не отражается скрипт

  13. 33
    Олег

    Благодарю. Применил.

  14. 34

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

  15. 35
    Aleksov

    Доброе время суток!
    Подскажите, как установить задержку перед срабатыванием сценария скрипта таким образом, что-бы подсказка появлялась только после удержания курсора над заданным объектом заданный промежуток времени, а если удержание курсора было меньше заданного промежутка времени, скрипт не выполнялся?

  16. 50
    Kox
    @

    А как сделать что бы подсказка чуть быстрее выскакивала ??

  17. 52
    Firebreather
    @

    Отличная находка! :) Взял себе на вооружение…

    Заметил небольшой баг — если на странице есть скрытые контейнеры (неактивные вкладки, к примеру), в которых есть тултипы, то нормально анимация работает только на активной вкладке при загрузке страницы, а на всех остальных вкладках тултипы половинятся по высоте…

    Вылечилось добавлением минимальной анимационной высоты в CSS-класс: .jQtooltip div

    height: 14px;

    Спасибо большое за скрипт!

  18. 55
    Firebreather
    @

    Пока решил сделать разделение по подсказкам — у «мини» они однострочные, а у ссылок — многострочные :)
    Для этого добавил ещё один CSS:

    .jQtooltip.mini div { height: 14px; }

    Так работает без косяков))

  19. 56
    Максим
    @

    сейчас всплытие подсказки происходит слева направо, а как сделать наоборот?

  20. 59
    Андрей

    Вопрос что я делаю не правильно? Решил сделать на вашем примере подсказку для изображений
    В скрипте

    'span.jQtooltip'

    изменил на

    'img.jQtooltip'

    В html пишу

    <img class="jQtooltip" title="asdasdasd"

    Но подсказка не работает. Вопрос что я сделал не так?

  1. 1

    Нашел решение. Вот весь код скрипта:

    $('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();
    		});
    	}
    })
    
Ваш комментарий