Главная JavaScript

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

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

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

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

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

    -webkit-border-radius: 2px;
  2. Клево. Спасибо.)
    Посетителям понравится такое!

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

  4. Андрей Гурылёв
    12 лет 8 месяцев назад

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

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

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

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

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

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

    Спасибо!!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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