adminvps

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

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

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

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

    В CSS еще бы добавить строку для WebKit-браузеров:

    -webkit-border-radius: 2px;
  2. 2
    Вадим

    Клево. Спасибо.)
    Посетителям понравится такое!

  3. 3

    Дмитрий, как всегда на высоте! Спасибо!

  4. 4
    Андрей Гурылёв

    Не хватает очень важного Гугл плюс 1.
    Дмитрий, добавите?
    И, кстати, хотелось бы возможность включения/отключения переключателя как во втором примере в более ранней статье про этот же сервис.

  5. 7

    Ого! Красота какая! ;) Спасибо, Дим!

  6. 8
    Азад

    Спасибо, Дмитрий! Давно хотелось поставить у себя что-то подобное. Теперь, благодаря тебе, уже работает. Очень нужная штука и красиво получилось :)

  7. 9
    @

    Спасибо. Няшная хреновина (:

  8. 10
    Константин

    Спасибо, как раз то, что искал. Поставлю себе на сайт, только уберу анимацию.

  9. 11

    Дорогой Димокс, этапять! Заюзала у себя на новом шаблоне: _allpa.ru/kontakty/email-me/
    Пришлось юзать mini-вариант, потому как иначе со ссылкой эти великолепные тултипы использовать нельзя, ибо они закрывают текст/ссылку полностью и на неё не нажмёшь :)

    Спасибо!!!

    • 12

      Все можно. Никто не мешает подредактировать стили, чтобы подсказка была выше ссылки. Достаточно поменять параметр bottom: -1px;.

      • 13

        Действительно! Мерси :)
        Но я, пожалуй, оставлю как есть. Во-первых, с вопросиком получается красиво, это раз. Во-вторых, сразу видно, что это не просто ссылка. В-третьих, тут ещё проблема с изображениями-ссылками: в зависимости от размера картинки нужно будет подгонять каждый раз положение тултипа, потому как он не понимает, что всплывать надо над изображением-ссылкой, он всплывает так, как указано в css.
        А морочить Вам голову просьбами подпилить не хочу категорически. Да и сама уже измучилась с кодами/твиками/скриптами — сил моих больше нет :)
        Так как есть — замечательно :)
        Разрешите ещё раз поблагодарить Вас: Ваш блог это просто кладезь какой-то блого-полезняшек!

  10. 15
    Егор
    @

    Ни в какую не могу получается поставить скрипты с jquery.
    Может я не правильно подключаю jquery ? или не правильно заливаю файл на фтп wordpress. Делаю я это таким образом: в админ панели перехожу во вкладку медиафайлы, а далее просто загружаю файл и получаю на него ссылку. Далее просто вставляю ссыль на файл в ваш скрипт. jquery я подключал следуя этому мануалу http://n-wp.ru/4619 .
    Я не уверенный пользователь html. Делаю все исключительно по мануалам. Может просто в head не там скрипт вставляю.

    Не подскажете, в чем может заключаться моя проблема?
    Спасибо.

    • 16

      Судя по том, что вы написали, все правильно делаете. Причин-то может быть множество.

      • 17
        Егор
        @

        Вчера еще очень долго пытался поставить дома скрипт с плавающей панелькой соц сетей. Но ничего так и не вышло. В конце концов стал уже лазить по сети, нашел плагин для wordpress sozialize it. Вы должны быть знакомы с ним т.к разработчик указывал на сотрудничество с Вами.
        Поставил его. Панелька вроде появилась, но на ней нет никаких закладок соц сетей. В горизонтальном положении она довольно большая, хорошо видное белое окно. Если же в плавающей вертикальном состоянии, то это окошко 1 на 1 см в котором так же ничего нет.
        Почему могут не подгружаться закладки? или может для этого плагина еще отдельно нужно jquery подключать?
        Извините за надоедливость, уж очень хочется разобраться с этой вещью. Использую стандартную тему twentyeleven. Никаких сайдбаров не использую.

  11. 20

    Хм, Дим, мне тут такая мысль пришла.
    А реально ли как-то сделать, чтобы скрипт.. м.. сверял слова по некому конфигу или БД и, находя их на странице, подставлял подсказку.
    Ну, тобишь, вместо того, чтобы пихать каждое слово в текст, как-то сделать так, чтобы все найденные (заранее заданные) слова на странице, например, слово BSOD, имели указанную в скрипте/настройках подсказку, так сказать, автоматически, а не путем ручного запихона оных в тег.
    Не знаю насколько внятно объяснил, но попытался..

  12. 23

    А вот вместо <abbr> чтобы такое выдавалось, что нужно?

  13. 26
    Егор
    @

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

  14. 35

    Здравствуй! Спасибо за полезные щедро дарованные знания. Такой вопрос возник. Можно ли во всплывающей подсказке вывести кликабельную ссылку?

  15. 41

    Обожаемый Димокс, я таки приступила к давно обещанному пиару Вашего прекрасного во всех отношениях блога (и буду вновь и вновь нести по Интернету благую весть о нём :) ) — сослалась на этот Ваш пост у себя (список тви-фаворитсов): _allpa.ru/1-twitter-favorites/
    Спасибо!!!

  16. 43

    Снова, привет! Не подскажешь. Я в веб программировании дерево, и толком не могу объяснить. В общем всплывающее окошко подсказки как будто находится в низу слоёв страницы, как сделать что бы она всплывала всегда поверх всех элементов страницы? что бы было понятней скрин http://imglink.ru/show-image.php?id=9f4157144cee2d6a94141ba50f26a8e3

  17. 48
    Артём

    Огромное спасибо! Но у меня такой вопрос как можно округлить края у подсказки и можно ли сделать фот градиентом? Заранее благодарен!

  18. 50
    uRonaldu

    Очень классный скрипт. Благодарю ! И сразу вопрос: что надо изменить, чтобы в квадратике был не ! (восклицательный знак, а ? (вопросительный). И как убрать анимацию ?

    • 51

      Восклицательный знак находится в хтмл-коде.

      Что убрать анимацию, нужно:

      1) заменить:

      .animate({width: width + 20, height: height + 20}, 200).show(200)
      .animate({width: width, height: height}, 200);
      

      на:

      .show();

      2) заменить:

      .animate({width: width + 20, height: height + 20}, 150)
      .animate({width: 'hide', height: 'hide'}, 150);
      

      на:

      .hide();
  19. 52
    bibitur

    Спасибо за скрипт.
    Возникла ситуация, когда на нескольких страницах присутствует несколько одинаковых подсказок с длинным текстом. Подскажите, можно-ли сделать так, чтобы текст подсказки не вписывался в атрибут title тега span, а подгружался из внешнего файла?

  20. 54
    riddle

    да еще бы в админку кнопку span class=»jQtooltip» а то каждый раз добавлять очень муторно

    • 55

      Для такого существует плагин AddQuicktag — можно добавить какие угодно коды и они будут в виде кнопок в текстовом редакторе.
      Не представляю, как я раньше без него обходилась.

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