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

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

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

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

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

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

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

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

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

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

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