Бесплатная подборка всплывающих подсказок с использованием JQuery и CSS3

Разместил / Просмотров: 19 492 / комментариев 15

Здравствуйте, дорогие читатели блога beloweb.ru. В этот замечательный вечер я спешу представить Вам, замечательную подборку бесплатных плавно всплывающих подсказок на любой вкус и цвет с использованием CSS3 и JQuery.

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

Элегантная тёмная всплывающая подсказка на CSS и JQuery

Пример ι Скачать исходники

Подсказки (метки) для картинок на сайте

Пример ι Скачать исходники

Круглые и красивые всплывающие подсказки для картинок и для сайта

Пример ι Скачать исходники

Несколько примеров реализации всплывающих подсказок на JQuery

Пример ι Скачать исходники

Красивые и большие подсказки с JQuery

Пример ι Скачать исходники

Красивые и яркие всплывающие подсказки на CSS3

Пример ι Скачать исходники

Тёмное меню с красивыми выпадающими подсказками

Пример ι Скачать исходники

Классные подсказки с картинками

Пример ι Скачать исходники

Красивая информационная лента с плавными подсказками при наведении

Пример ι Скачать исходники

Несколько не плохих примеров реализации подсказок для ссылок

Пример ι Скачать исходники

Простая всплывающая подсказка для ссылок на сайте

Пример ι Скачать исходники

Всплывающие подсказки в стиле Фейсбука

Пример ι Скачать исходники

Большая подсказка, которая срабатывает после клика

Пример ι Скачать исходники

Всплывающая подсказка в очень светлом стиле

Пример ι Скачать исходники

Несколько больших и очень красивых всплывающих подсказок

Пример ι Скачать исходники

  • Александр

    спасибо огромноееее

  • Александр, всегда рад :-)

  • Подборка понравилась. Толковая. Действительно, надо почаще использовать такие интересности на сайтах.

    А можно спросить… Почему в названии указано «БЕСПЛАТНАЯ подборка». А потом еще чуть ниже: «БЕСПЛАТНЫЕ подсказки». Они что — подобные бывают еще и платные?..
    хм…

  • Дива Дии, спасибо огромное за такие слова. Да, бывают и таки вещи платные. Я сам в шоке :-)

  • Что-то у меня глючно работает! Можешь сказать — что не так? И использовал http://www.htmldrive.net/items/demo/1186/JQuery-and-CSS3-Mobile-Friendly-Tooltip и http://www.htmldrive.net/items/demo/889/Multicolor-tooltips-CSS3.
    Первый вариант еще более-менее нормально работает, в второй — вообще ужас! Сам посмотри здесь в самом низу страницы — http://musicathome.ru
    Главный вопрос — почему первая подсказка полностью черная? В примере она прозрачная немного… Или это из-за того, что фон черный?
    А со второй что? Я все так в примере делал — но там откуда-то даже белый фон взялся. Что тут происходит?)))

  • Юрий, у меня подсказки отлично работают, всё плавно. Почему не прозрачные нужно в коде смотреть, посмотри опасити. Во второй ссылке там несколько подсказок. Возможно где то перепутал. :-) А в скачанном примере всё нормально работает?

  • Юрий, у меня подсказки отлично работают, всё плавно. — да я уже исправил. Сам догадался. А вот opacity почему-то не работает. Я его и прописывал, и все равно не срабатывало.
    Вот код:

    opacity:0.6;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #111;
    content: »;
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    -moz-transition: all 0.8s 0.02s ease;
    -o-transition: all 0.8s 0.02s ease;
    -webkit-transition: all 0.8s 0.02s ease;

  • У меня еще почему-то не получается сделать задерку через transitions. Она получается, но почему-то в Хроме подсказка появляется выше положенного места, и выезжает с края браузера, пролетая через все окно. Почему?

  • Странно, но по коду должно работать.

  • Ну вот я и думаю, что не так! Пока что сделал так, что все работает, только вот я хотел бы это по-другому реализовать. Жалко. Видимо, пока придется так оставить.

  • Виктор

    Забрал первую, очень поравилась и легко настриваестя. СПАСИБО

  • Кононученко Антон

    Вопрос.А как сделать чтобы в первом примере окошко вплывало вниз, а не вверх?

  • Нужно спросить у разработчика :)

  • Кононученко Антон

    А где его контакты?)

  • Антон

    Помогите мне подключить первое всплывающее окно. Поставил всё как положено. подключил скрипт. Но не хочет работать. Работает только стандартное всплывающее окно. Вот два скрина. Может сможете подсказать в чём проблема? http://prntscr.com/5s7mo3 и вот ошибка в логе это http://prntscr.com/5s7mwq и это http://prntscr.com/5s7n54 . применяю на cms joomla 3 .