Nico_izo Nov 9 2011 at 19:01

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

2 min

70K

CSS *

From sandbox

+105

Comments 46

shimapa23 Nov 9 2011 at 19:30

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

-3

Paul_Smith Nov 9 2011 at 19:59

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

shimapa23 Nov 9 2011 at 23:22

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

-2

Jakeroid Nov 9 2011 at 19:31

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

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

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

Nico_izo Nov 9 2011 at 19:39

Если сделать примерно так, по стандарту 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 Nov 9 2011 at 21:43

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

Fedcomp Nov 9 2011 at 20:07

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

-8

Fedcomp Nov 9 2011 at 20:14

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

+12

glazs Nov 9 2011 at 21:56

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

+18

diamant Nov 9 2011 at 20:08

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

Fedcomp Nov 9 2011 at 20:28

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

dnv777 Nov 9 2011 at 20:24

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

tibalt Nov 9 2011 at 21:52

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

-1

andrewsh Nov 10 2011 at 04:12

а как же calc? :)

Tesla Nov 10 2011 at 09:44

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

UFO just landed and posted this here

Tesla Nov 10 2011 at 11:09

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

dnv777 Nov 10 2011 at 13:45

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

v1z Nov 9 2011 at 20:25

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

raduzhka Nov 9 2011 at 21:52

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

vixi Nov 9 2011 at 21:53

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

Jakeroid Nov 9 2011 at 22:13

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

fmraven Nov 9 2011 at 22:55

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

freetonik Nov 10 2011 at 00:46

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

я.

-2

Serator Nov 9 2011 at 23:45

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

masterbo Nov 10 2011 at 01:22

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

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

tibalt Nov 10 2011 at 06:32

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

masterbo Nov 10 2011 at 15:59

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

tibalt Nov 10 2011 at 16:30

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

masterbo Nov 10 2011 at 16:34

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

torbasow Nov 10 2011 at 09:53

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

masterbo Nov 10 2011 at 15:57

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

torbasow Nov 10 2011 at 16:08

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

masterbo Nov 10 2011 at 16:17

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

pepelsbey Nov 10 2011 at 14:51

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

masterbo Nov 10 2011 at 15:57

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

pepelsbey Nov 10 2011 at 14:52

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

Nico_izo Nov 10 2011 at 15:20

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

pepelsbey Nov 10 2011 at 15:23

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

Nico_izo Nov 10 2011 at 15:27

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

Boiler Nov 10 2011 at 16:00

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

Nico_izo Nov 10 2011 at 16:13

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

iPacman Nov 11 2011 at 11:03

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

Quiz Nov 11 2011 at 13:15

Firefox 8.0 @ Windows XP

Xao Nov 12 2011 at 19:14

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

-1

UFO just landed and posted this here