Создание анимированных tooltips'ов с помощью CSS3

[IkaR49]

Идея хорошая, но сама реализации мне как-то не очень понравилась… Первый и четвёртый примеры хороши, но вот второй вызвал смешанное чувство. Увидев всплывающий круг пошла сразу же ассоциация с кругами доступности (или как их там) из G+, и эти же круги у остальных иконок смотрелись как-то… не так. А третий неудобен тем, что чтобы прочитать тултип надо поворачивать голову.
Но спасибо за статью, ведь все описанные мной проблемы легко устранимы :)

[ma1ish]

Честно говоря, я не очень разбираюсь в правильности кода. Но я бы хотел, чтобы многие сайты внедряли такие красивые фичи на свои сайты и сервисы. Работать с такими «красивостями» ну очень приятно.

[gdX]

К сожалению, примеры будут работать только в тех браузерах, которые поддерживают псевдо-элементы и свойство transitions.

[siasia]

А в каких современных браузерах это не поддерживается?

[TRIMER]

У меня в IE9 не работает

[altrosilka]

Demo 2 с пузырьками очень понравилось. Спасибо!

[helloilya]

Всегда пожалуйста.

[siasia]

анимированных tooltips
христианские смешаться

[helloilya]

Можно было бы написать и «анимированных подсказок», но в данном случае слово «tooltips» лучше обозначает то, о чем пойдет речь в статье, нежели слово «подсказка».

[siasia]

Я в таких случаях пишу tooltip'ов. Извините за нацизм, название вырвало глаз :)

[infinius]

«Анимированные всплывашки» очень круты. В Бюро подсмотрел.

[infinius]

ссылка на artgorbunov.ru не вставилась

[Zlobober]

Второй и четвёртый пример у меня заметно подтормаживают. Firefox 9.0.1, под Windows XP. Особенно если поводить резко влево-вправо по иконкам.

[TEHEK]

Подсказка может всплывать только сверху и если проскроллить вниз, то подсказки не будут видны. Однако демка сделана очень хитро и скроллить вниз нельзя =) Можно убедиться в недостатке, увеличив высоту контейнера в файербаге.

Однако простота требует жертв, что поделать.

[TRIMER]

Красивые эффекты. Небольшой фидбек:

Chrome 16/Mac OS X Snow Leopard:
1. Все 4 примера подтормаживают через раз
2. В 4 примере прежде чем появится подсказка, все окно браузера стает полностью синим на долю секунды.

IE 9/Windows 7
Ничего не тормозит, но и анимации нет)) Видимо, как вы и гооврили, далеко не всем браузерам это доступно))