Тултипы на CSS3 и HTML5

[@shimapa23]

Симпатичный эффект, но мне кажется, что лучше бы было сделать все углы закругленными…

[@Paul_Smith]

Я так понял, здесь подразумевается «облако», как в комиксах. Причём острый (не скругленный) угол указывает на «говорящего» — на слово, к которому подсказка относится.

[@shimapa23]

Так даже еще симпатичнее будет!

[@Jakeroid]

А можно сделать так, что бы тег выглядел вроде следующего?

<span class="MyClass" img="image.gif">My Text</span>

Чисто любопытно.
И спасибо за статью.

[@Nico_izo]

Если сделать примерно так, по стандарту CSS3 (Тыц)

<span class="MyClass" data-img="image.png">My Text</span>

.MyClass:hover::after {
content: "";
width: 50px;
height: 50px;
background-image: attr(data-img, url);
background-color: rgba(0, 0, 0, 0.8);
}

Конечно, вышеприведённый код написан на правах теории.

[@tibalt]

если изображение носит чисто оформительский характер, как в примере — иконка, то лучше не перетаскивать ее из css в хтмл. для других случаев как раз и предусмотрен пример №2.

[@Fedcomp]

Есть готовые jquery решения, не вижу смысла городить свое, правда.
К примеру craigsworks.com/projects/qtip/ очень мощный.
Есть и множество более простых вариаций.

[@Fedcomp]

прошу прощения, не заметил что топик про чистый css :(

[@glazs]

jQuery головного мозга.

[@diamant]

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

[@Fedcomp]

возможно можно поиграться с :focused

[@dnv777]

проблема в том что его положение фиксировано, если линк расположен на границе экрана
то tooltip вылазит за пределы и не читабелен, хотя даже многие решения на jQuery болеют тем же

[@tibalt]

согласен, что положение баллунов и тултипов на надо расчитывать скриптом, к сожалению css в этом деле нам не помощник(

[@andrewsh]

а как же calc? :)

[@Tesla]

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

[@Tesla]

А вы страницу открывали? Я понятия не имею, как это работает, но в опере и хроме тултип отобразился с другой стороны от текста.

[@dnv777]

а если ссылку к верхней границе подогнать скролом??
у меня tooltip вылазит

[@v1z]

Неплохо, открыл для себя свойство content: attr(data-tooltip) в css

[@raduzhka]

Второму примеру — сто лет в обед

[@vixi]

мне одному захотелось кликнуть на qutIM?

[@Jakeroid]

Я поступил хуже… Я кликнул!

[@fmraven]

Раздвигающиеся кнопки — очень креативно. Спасибо, отличная стать.я

[@freetonik]

классная у вас подпись.

я.

[@Serator]

Собственно статья с www.css3.info/tooltips-with-css3/ говорит о, по сути, той же технике, но написана в 2008. И это не единственный пример в сети…

[@masterbo]

Можно спросить? Отход от семантики это обязательное условие работы этого кода или все-таки ничего не мешает сделать стандартно:

<abbr title="I'm small tooltip. Don't kill me!">Hover me!</abbr>

[@tibalt]

тогда поверх кастомного тултипа всплывет родной, браузерный

[@masterbo]

Может есть способ запретить этот tooltip?

[@tibalt]

не писать ничего в тайтл? оО

[@masterbo]

Нееее. title как раз семантически предназначен для таких вещей. Просто задачка, как мне показалось, снова свелась к красивостям за счет ухудшения семантики. Вот я и уточняю, можно ли как-то решить без жертв?

[@torbasow]

Это же не аббревиатура. Почему бы не просто span?

[@masterbo]

Пусть будет <dfn>. Нашли к чему придираться.

[@torbasow]

dfn мне тоже пришёл в голову, но я подумал, что тултип не обязательно вешается на термин. В примере так точно не на термин.

[@masterbo]

По той же причине я укзал <abbr>, на который (а еще на <acronym>) тултипы вешаются чаще всего. А Таким «Hover me!» они нужны очень редко и тут действительно полезнее <dfn>.

[@pepelsbey]

Hover me! — это не аббревиатура, значит это в вашем случае отход от семантики.

[@masterbo]

Пусть будет <dfn>. Суть не в этом, а в семантике как таковой.

[@pepelsbey]

Псевдо-элементы из CSS2, случайный data-атрибут и смотрите — уже красивый заголовок про CSS3 и HTML5. Класс!

[@Nico_izo]

Для вас был написан дисклеймер. Т.к. новые attr() атрибуты ещё не поддерживаются, то на большее пока рассчитывать нельзя.

[@pepelsbey]

Дисклеймер читал. Просто писать «N на CSS3 и HTML5» это как «СЕКС. ШОК. ФОТО», жёлтенько.

[@Nico_izo]

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

[@Boiler]

Было бы неплохо указать в каких браузерах работает эта фича.

[@Nico_izo]

Firefox 3+, Opera 9.6+, Chrome, IE9+
В теории, она должна работать везде, где есть псевдоэлементы и поддерживается псевдокласс :hover.

[@iPacman]

Прочитав заголовок, подумал что это пост «Good news, everyone! Решение найдено!». Однако…
«overflow:hidden» — непобедимый враг всех кастомных тултипов. Ваш пример можно испортить так:
.coo {width:300px; overflow:hidden; position:relative}

[@Quiz]

Firefox 8.0 @ Windows XP

[@Xao]

ну, лис как всегда