HINT.css — всплывающие подсказки средствами CSS

[mgarin]

Разработчики библиотеки напоминают, что CSS3 transitions для псевдоэлементов работают пока только в браузере Firefox, но в скором времени будут доступны и в webkit.

Похоже они уже доступны…

[transpond]

Судя по трекеру — да, но проверяю в своих Chrome и Safari (на всякий случай обновил до последних версий) и CSS3 transitions не видно. В Firefox всё работает.

[mgarin]

В Chrome точно работает (как минимум под win версией) — как тултипы тут, так и пример transitions'ов тут. Вероятно вы просто ещё не обновились по какой-то причине. Насчёт Safari же ничего не скажу…

[transpond]

Спасибо, добавлено примечание к топику.

[mgarin]

Да не за что :)
А в целом — простовато, но достаточно недурно, если вам не нужны лишние навороты.

[weiss]

Transitions для псевдо-элементов не работают в стабильной версии Chrome, только в 26.

[mgarin]

У меня:

Версия 24.0.1312.57 m

Всё работает, так что даже не знаю…

[weiss]

trac.webkit.org/changeset/138632
css-tricks.com/transitions-and-animations-on-css-generated-content
Ни в Windows, ни в OS X у меня не работает transition для псевод-элементов.

[mgarin]

Версия Chrome:
s2.hostingkartinok.com/uploads/images/2013/02/c19c4ee991aa05f7f7f2db0bf1652b02.png

Скрины из примеров, которые приводил выше:
s2.hostingkartinok.com/uploads/images/2013/02/1a4667c33c21807d0affea51ae3ae5ee.png
s2.hostingkartinok.com/uploads/images/2013/02/b73ffcae1d97e8807f82ed738a663fc9.png

Проверил также на маке и паре других виндовых машин — всё работает.
Никаких подписок на бета-версии Chrome, бета-фичи или что-то подобное вроде как нет.

Работает всё 1 в 1 как в последней версии FF.

[weiss]

1. Скрины статичны, а transition отвечает за «плавность перехода», задавая время совершения перехода, временную функцию и свойство CSS (либо all по умолчанию). Проще говоря, тултипы должны не просто появляться, а делать это плавно. Если вы знаете, что делает transition, то я извиняюсь, но вы показывате работу анимации с помощью статичных изображений, а это может говорить о том, что не знаете.
2. Пример с сайта W3 Schools тут не при чем, transition не работает в Chrome для псевдо-элементов (в случае hint.css это ::after и ::before), а на W3 Schools transition применяется для обычного элемента.

[mgarin]

С примерном с W3 Schools я действительно ошибся, признаю — поспешил взять первое найденное. Насчёт изображений — согласен, не лучший пример — на них толком не видно ничего, но, честно говоря, никакого смысла снимать видео ради доказательства наличия плавной анимации я не вижу.

И, как я уже писал выше — на сайте с примерами тултипов они одинаково плавно появляются как в FF, так и в моём «устаревшем» Chrome. Соответственно имеет смысл полагать, что transition таки работает на этой версии по каким-то причинам.

[roman01la]

Разработчики библиотеки напоминают, что CSS3 transitions для псевдоэлементов работают пока только в браузере Firefox, но в скором времени будут доступны и в webkit.

CSS3 transitions для псевдоэлементов уже доступны в webkit-браузерах

А также в IE10

[transpond]

Спасибо. Обновлено примечание к топику.

[transpond]

Библиотека разработана не мной. Про технологию вкратце рассказано в самом начале топика в разделе «Что».

[Methos]

Нельзя скопировать текст мышью внутри балона.

[whybenormal]

Ума не приложу, с какой целью кому-нибудь понадобится копировать подсказку. Это всего-лишь подсказка, как title="".

[whybenormal]

Такая продвинутая бабушка сможет и скриншот связать :) А вообще, вы себе это представляете?

[loingrim]

Opera 12.13 — полёт нормальный

[loingrim]

Похоже, в более ранних тоже работает. Проверил 12.02.

[Rooc]

смущает вот это
.hint--left::after { margin-bottom: -14px; }

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

[akral]

Задержку наверное можно похакать через cubic-bezier.

Или не хакать, а решить нормально с помощью transition-delay. Или я чего-то не понял?

[akral]

Не знаю. :(

[DjOnline]

Надо всегда писать поддерживаемые браузеры.
IE9 — работает, IE8 — нет.

[transpond]

Спасибо. Добавлено, как примечание к топику.