30+ Tooltips - волшебные подсказки на jQuery

Оригинал статьи: Peteris Kelle

Опубликовано 17.10.10  /  Автор перевода: Иван Саломатин

Комментариев 0

Тултип (tooltip) - это маленькая всплывающая подсказка, которая порой играет очень большую роль в дизайне сайта. Если тултип на вашем сайте сделан качественно и выглядит привлекательно, он наверняка поспособствует наилучшему восприятию сайта посетителями и повысит его юзабилити.

Итак, думаю, пора представить вам подборку наиболее качественных jQuery тултип-плагинов. По мере обнаружения новых достойных внимания примеров, я буду добавлять их в коллекцию.

1. Dynamic tooltip

Отличный тултип! Поддерживается трансформация, полупрозрачность и эффект тени.

2. Popup Bubble

Замечательный тултип! Выглядит просто, но сделан с применением очень красивого эффекта трансформации. Этот тултип может быть очень полезен для простых и строгих веб-сайтов.

3. jQuery Horizontal Tooltips Menu

Красивый тултип! Этот тултип никогда не исчезает, но перемещается вслед за указателем мыши, при движении курсора над иконками меню. Довольно просто выглядит, но анимация просто великолепная.

4. Prototip

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

5. Coda Popup Bubble

Хороший тултип с эффектом падающей тени.

6. Awesomeness

Замечательный тултип с хорошей анимацией и полупрозрачной рамкой вокруг элемента.

7. TipTip

Красивый тултип с эффектами плавного появления/исчезновения, полупрозрачностью и эффектом падающей тени.

8. (mb)Tooltip

Красивый тултип для полей типа "input".

9. vTip

Симпатичный тултип с эффектом плавной трансформации. Также, реализована привязка подсказки к перемещению курсора.

10. jGrowl

Замечательный тултип, который появляется по клику на ссылку в тексте и залипает в правом-верхнем углу окна браузера. Закрывается подсказка самостоятельно по прошествии некоторого времени, либо по клику на кнопку закрытия. Также, примененены эффекты плавного раскрытия/закрытия подсказки и свойство полупрозрачности.

11. jQuery Ajax Tooltip

Интересный тултип, который может содержать не только текст, но и изображения (что-то вроде мини-странички).

12. Digg-style post sharing tool

Отличный способ использования тултипа для добавления страницы в социальный сервис закладок.

13. Input Floating Hint Box

Интересный тултип со скруглёнными уголками для полей типа "input". Тултип появляется, когда вы помещете курсор в поле и исчезает, когда вы кликаете в любом ином месте страницы.

14. Simpletip

Красивый тултип с эффектом постепенного появления/исчезания. Когда вы наводите курсор на ссылку, подсказка плавно появляется над или под курсором.

15. qTip

Очень простой тултип. Может быть реализован со скруглёнными уголками или в виде комикс-облачка.

16. Orbital Tooltip

Интересный тултип-плагин, позволяющий вручную установить позицию подсказки.

17. Inline HTML Tooltip

Отличный тултип с интересным визуальным эффектом.

18. tipsy

Интересный тултип, который может появляться сверху, снизу, слева или справа от ссылки.

19. Easiest jQuery Tooltip Ever

Довольно простенький тултип, но может быть очень полезен, если вы пожелаете отобразить изображение над ссылкой.

20. BsTip

Разнообразные тултипы с эффектами проявления/исчезания и интересной рамочкой вокруг.

21. EZPZ Tooltip

Простой тултип, который следует за курсором.

22. BeautyTips

Симпатичный тултип с эффектом полупрозрачности. Поддерживаются разнообразные варианты оформления и анимации.

23. Tooltip

Разнообразные тултип-плагины для вашего сайта.

24. clueTip

Простой тултип, который появляется при наведении курсора на ссылку и исчезает при клике на кнопку закрытия.

25. Создание простых Tooltip средствами jQuery и CSS

Несколько простейших, но симпатичных тултипов.

26. BetterTip

Тултип, который появляется справа от ссылки.

27. jTip

Простенький, но очень полезный для форм авторизации тултип.

28. jqTooltip

Несложный тултип с загрузкой содержимого подсказки средствами аякс.

29. Pop!

Простенький тултип, который появляется, когда вы кликаете на стрелку и исчезает, когда вы кликаете где-либо ещё.

30. Создаём простейший CSS+JavascriptTooltip

Простенький тултип со скруглёнными уголками. Движется вслед за указателем курсора.