20 мануалов CSS3 по созданию всплывающих подсказок на сайте

12

33816
22-11-2011

20 мануалов CSS3 по созданию всплывающих подсказок на сайтеВплывающая подсказка (tooltip) на сайте это довольно симпатичный элемент оформления. Причем внешний вид такой всплывающей подсказки можно сделать очень даже привлекательным и нетривиальным. Во-первых, можно настроить форму всплывающего контейнера, его цвет и размер. Во-вторых, можно запросто управлять содержимым всплывающей подсказки, добавляя туда различные элементы и блоки по своему усмотрению. Ниже представлены подробные мануалы как это можно сделать с помощью технологии CSS3. Каждый урок имеет наглядное демо того, что в итоге получится.

1. Digg Style Post Tooltip
Перейти на Digg Style Post Tooltip

2. Prototip
Перейти на Prototip

3. Tooltip With jQuery
Перейти на Tooltip With jQuery

4. Horizontal Tooltips Menu
Перейти на Horizontal Tooltips Menu

5. Easy Tooltip — страница удалена автором
Перейти на Easy Tooltip

6. Bquery
Перейти на Bquery

7. Tiptip jQuery Plugin
Перейти на Tiptip jQuery Plugin

8. Coda Popup Bubbles
Перейти на Coda Popup Bubbles

9. Jgrowl — страница удалена автором
Перейти на Jgrowl

10. Pop
Перейти на Pop

11. Tooltip — страница удалена автором
Перейти на Tooltip

12. jQuery Ajax Tooltip
Перейти на jQuery Ajax Tooltip

13. Easiest Tooltip
Перейти на Easiest Tooltip

14. jQuery Tooltip Plugin
Перейти на jQuery Tooltip Plugin

15. Qtip
Перейти на Qtip

16. Simple Cssjavascript Tooltip
Перейти на Simple Cssjavascript Tooltip

17. Tipsy
Перейти на Tipsy

18. Balloontooltip
Перейти на Balloontooltip

19. Vtip — страница удалена автором
Перейти на Vtip

20. Ezpz Tooltip
Перейти на Ezpz Tooltip

Комментариев 12 комментариев

Спасибо, очень полезно!

И вопрос — не трактуют ли поисковые системы эти подсказки как скрытый текст (к которому, как бытует мнение, поисковики относятся плохо)?

Спасибо

ОтветитьОтветить

@Atlanta Travel:
Честно говоря, сама никогда не сталкивалась с такой информацией. Хотя, мне кажется, что поисковики лояльно относятся к таким фишкам. Иначе они не были бы так распространены на вполне успешных сайтах. Но если у кого есть более точные данные об отношении поисковиков, буду благодарна ))

ОтветитьОтветить

@Atlanta Travel, @Наташа Клевер: не трактуют. Информация для tooltips’ов «вынимается», как правило, из различных атрибутов таких как title или alt. Так же этот текст нельзя считать скрытым.

Применяйте без боязни … но только там, где это нужно (:

ОтветитьОтветить

@Womtec:
Спасибо большое за информацию! Я где-то так и думала, что к «вредителям» всплывающие подсказки уж точно никак не относятся. Про уместность их применения тоже все правильно ))

ОтветитьОтветить

Как-то искал тултипы, перерыл всё и ничего подходящего не нашёл. Для меня подходящее, чтобы и кода мало и руками ничего прописывать не надо, в этих всех надо класс задавать. В итоге у кого-то с сайта стянул) Теперь всплывающая подсказка автоматом выводится где есть title.

ОтветитьОтветить

@Womtec, спасибо! -)

ОтветитьОтветить

@SwaEgo:
«чтобы и кода мало и руками ничего прописывать не надо» — отличные критерии выбора сама таких придерживаюсь ))

ОтветитьОтветить

Спасибо, я думаю многим пригодится. Поделюсь со всеми))

ОтветитьОтветить

@Роберт:
Спасибо!
По себе знаю, когда возникает такая необходимость, весь интернет перероешь в поисках таких подборок ))

ОтветитьОтветить

Удобно, красиво. Нужно пробовать.

ОтветитьОтветить

Отлично! Нашел то, что нужно! Особенно понравился 6 вариант! Забрал к себе на сайт)

ОтветитьОтветить

Спасибо, хорошая статья.
Еще рекомендую посмотреть плагин WP-Note.

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

65 queries in 3,136 seconds.