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

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

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

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

  1. Дмитрий
    10 лет назад

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

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

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

    • Для этого требуется доработка скрипта.

      • Dimox! А это очень сложно??? :)))
        Может доработаете. У Вас очень красивые подсказки, таких больше нигде не нашла. Немного добавила им красоты и теперь вообще блеск. А если они еще будут двигаться за курсором, то радости не будет предела.
        Сделайте пожалуйста:)))
        И кстати, только у Вас на сайте все ПОДРОБНО написано и ничего не нужно мудрить, я вставила ваши скрипты и css и все отлично.
        Спасибо!
        Очень жду ответа.

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

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

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

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

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

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

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

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

  12. <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. Благодарю. Применил.

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

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

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

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

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

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

    height: 14px;

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

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

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

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

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

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

    'span.jQtooltip'

    изменил на

    'img.jQtooltip'

    В html пишу

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

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

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