Полезные руководства по всплывающим подсказкам и плагины jQuery

Подсказка — это обычный элемент графического интерфейса пользователя. Он используется вместе с курсором, обычно указателем мыши. Пользователь наводит курсор на элемент, не щелкая его, и может появиться всплывающая подсказка — небольшой «бокс наведения» с информацией о наведенном элементе.

Я собрал несколько руководств и плагинов jQuery для всплывающих подсказок.

1. TinyTips — легкий плагин jQuery для всплывающих подсказок

TinyTips — это очень легкий плагин jQuery, который дает возможность добавлять всплывающие подсказки практически к любому элементу на странице. Тщательно документирован и удобен для дизайнеров.

2. Пометка фотографий в стиле Flickr с использованием jQuery

jQuery Photo Tagger занимает около 1000 строк кода. Таким образом, вы можете либо проверить страницу проекта, либо попробовать онлайн-демонстрацию для себя. Обратите внимание, что вы должны удерживать клавишу CTRL при щелчке мышью, чтобы создать точку доступа.

Демо | Скачать

3. Плагин TipTip Custom Tooltip jQuery с нулевыми изображениями

TipTip использует атрибут title так же, как и встроенная подсказка браузера. Однако заголовок будет скопирован, а затем удален из элемента при использовании TipTip, поэтому всплывающая подсказка браузера не будет отображаться.
TipTip генерирует всего один набор всплывающих элементов, а не создает один набор всплывающих элементов для каждого элемента с примененным к нему TipTip. Это помогает ускорить работу и сократить время обработки. Сгенерированные элементы являются элементами div и добавляются в конец элемента body.

4. Как создать новые визуальные аннотации с помощью CSS3

ZURB научил нас создавать новые визуальные аннотации. Решение не было технически слишком сложным. В Notable они приняли концепцию изящной деградации: они используют преимущества новых методов CSS, которые чисто деградируют до старых браузеров.

Демо

5. Покажите свои ссылки в виде выпадающего списка с Pluralink

Pluralink — это удивительный плагин javascript для размещения нескольких ссылок в вашем тексте.

6. Эффект «Оттенки серого» при наведении с помощью CSS и jQuery

Эффект наведения в оттенках серого с CSS и jQuery основан на CSS-спрайтах и ​​нескольких строках jQuery, но требует небольшой подготовки, прежде чем его можно будет реализовать. Это не рекомендуется для крупномасштабных проектов и, вероятно, лучше всего подходит для отображения портфолио.

7. Посмотрите поближе с плагином AnythingZoomer jQuery

У вас небольшой участок. Вы наводите на него курсор. Появится область, позволяющая рассмотреть ее в увеличенном масштабе. Это плагин jQuery, который делает это. Я не собираюсь рассказывать вам, для чего вы должны его использовать, или разрабатывать сценарии использования. В этом вам может помочь ваше собственное творчество.

Демо

8. Создайте всплывающую подсказку с богатым содержанием с помощью JSON и jQuery

В этом руководстве показано, как создавать всплывающие подсказки на основе jQuery с информацией, извлеченной из массива JSON.

Демо

9. Замените всплывающую подсказку по умолчанию на Pretty (mb) Tooltip

(mb)Tooltip — красивая всплывающая подсказка для вашей веб-страницы в jQuery.

Скачать

10. Captify отображает красивые подписи к изображениям при наведении курсора

Captify — это плагин для jQuery, написанный Брайаном Ривисом для отображения простых, красивых подписей к изображениям, которые появляются при наведении курсора. Проверено на Firefox, Chrome, Safari и убогом Internet Explorer. Captify был вдохновлен ImageCaptions, еще одним плагином jQuery для отображения подобных подписей.

11. Предварительный просмотр изображений с помощью jQuery-плагина imgPreview

Питер Хиггинс создал Dojo Zoomer. Он разделен на 3 панели. При наведении курсора на изображение на левой панели правая панель динамически отображает обрезанную часть изображения, чтобы вы могли явно сфокусироваться на интересующей вас части основного изображения.

12. jQuery Javascript Image Magnifier под GPL

JQZoom — это программа для увеличения изображений на основе javascript, созданная на основе популярной платформы jQuery javascript. jQzoom — отличный и действительно простой в использовании скрипт для увеличения того, что вы хотите.

13. Простые прозрачные всплывающие подсказки с jQuery и CSS

Всплывающие подсказки CSS очень популярны в современном веб-дизайне, и, вопреки распространенному мнению, их действительно легко создать, особенно с помощью одного из самых популярных фреймворков javascript.

Демо

14. Magic Toolbox — Javascript и инструменты для масштабирования изображений Flash

Magic Toolbox создал 2 удивительных инструмента масштабирования изображений с помощью javascript (Magic Zoom и Magic Magnify). Magic Zoom — это инструмент масштабирования JavaScript. Это лучший способ отображать изображения с невероятной детализацией.

15. Прототип 2. Легко создавайте красивые всплывающие подсказки

Prototip позволяет легко создавать как простые, так и сложные всплывающие подсказки, используя фреймворк Prototype javascript.

Демо

16. Самая простая всплывающая подсказка и предварительный просмотр изображения с использованием jQuery

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

Демо

17. Всплывающие всплывающие подсказки в стиле Coda с jQuery

Coda — один из новых инструментов веб-разработки для Mac, популярный среди дизайнеров и разработчиков.

18. Пометка кликабельной области изображения показывает всплывающую подсказку

Taggify — это веб-виджет, который позволяет блогерам и издателям улучшать свои сайты, добавляя всплывающие подсказки к изображениям, связанные с определенными изображениями.
Демо

19. Ненавязчивые всплывающие подсказки с помощью Javascript и CSS

Пузырьковые всплывающие подсказки — это простой способ добавить (с помощью CSS и javascript) причудливые всплывающие подсказки в форме шара на любую веб-страницу.

Демо

20. Подсказки Fade In and Out для Prototype и Scriptaculous

CoolTips — это легкая и ненавязчивая техника замены всплывающих подсказок веб-браузера на JavaScript.
CoolTips используется для замены обычных всплывающих подсказок веб-браузера. Подсказки получают содержимое атрибута title, поэтому они совершенно ненавязчивы. CoolTips — это объектно-ориентированный класс, основанный на фреймворках Prototype JS и script.aculo.us.

21. Сладкие заголовки, прозрачные и исчезающие всплывающие подсказки

Sweet Titles Fading Tooptips не является подделкой NICE Titles и не пытается улучшить исправленную попытку Данстана. И уж точно он не скопирован из одного из тех зараженных обработчиками событий скриптов из Dynamic Drive.

Демо

22. Prototip Большинство функций всплывающих подсказок для прототипа

Prototip позволяет легко создавать как простые, так и сложные всплывающие подсказки, используя фреймворк Prototype javascript. Если вы также используете Scriptaculous, вы даже можете добавить к ним несколько приятных эффектов.

Демо

23. Упрощенные всплывающие подсказки BoxOver DHTML/Javascript

BoxOver использует javascript/DHTML для отображения всплывающих подсказок на веб-сайте. Однако реализация всплывающих подсказок не требует знания DHTML или javascript. Существует множество настроек, которые можно настроить, чтобы настроить его в соответствии с вашими потребностями, установив атрибут «заголовок» тега.