CSS
Comments 46
-3
Симпатичный эффект, но мне кажется, что лучше бы было сделать все углы закругленными…
+8
Я так понял, здесь подразумевается «облако», как в комиксах. Причём острый (не скругленный) угол указывает на «говорящего» — на слово, к которому подсказка относится.
+2
А можно сделать так, что бы тег выглядел вроде следующего?
<span class="MyClass" img="image.gif">My Text</span>

Чисто любопытно.
И спасибо за статью.
+2
Если сделать примерно так, по стандарту 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);
}


Конечно, вышеприведённый код написан на правах теории.
0
если изображение носит чисто оформительский характер, как в примере — иконка, то лучше не перетаскивать ее из css в хтмл. для других случаев как раз и предусмотрен пример №2.
-8
Есть готовые jquery решения, не вижу смысла городить свое, правда.
К примеру craigsworks.com/projects/qtip/ очень мощный.
Есть и множество более простых вариаций.
+4
Осталось сделать этот тултип рабочим на устройствах без мышиного курсора.
0
проблема в том что его положение фиксировано, если линк расположен на границе экрана
то tooltip вылазит за пределы и не читабелен, хотя даже многие решения на jQuery болеют тем же
-1
согласен, что положение баллунов и тултипов на надо расчитывать скриптом, к сожалению css в этом деле нам не помощник(
0
Тултип просто с другой стороны от текста выводится и за пределы экрана не вылазит.
UFO landed and left these words here
0
А вы страницу открывали? Я понятия не имею, как это работает, но в опере и хроме тултип отобразился с другой стороны от текста.
0
а если ссылку к верхней границе подогнать скролом??
у меня tooltip вылазит
+3
Неплохо, открыл для себя свойство content: attr(data-tooltip) в css
0
Раздвигающиеся кнопки — очень креативно. Спасибо, отличная стать.я
+1
Можно спросить? Отход от семантики это обязательное условие работы этого кода или все-таки ничего не мешает сделать стандартно:
<abbr title="I'm small tooltip. Don't kill me!">Hover me!</abbr>
+1
тогда поверх кастомного тултипа всплывет родной, браузерный
0
Нееее. title как раз семантически предназначен для таких вещей. Просто задачка, как мне показалось, снова свелась к красивостям за счет ухудшения семантики. Вот я и уточняю, можно ли как-то решить без жертв?
0
dfn мне тоже пришёл в голову, но я подумал, что тултип не обязательно вешается на термин. В примере так точно не на термин.
0
По той же причине я укзал <abbr>, на который (а еще на <acronym>) тултипы вешаются чаще всего. А Таким «Hover me!» они нужны очень редко и тут действительно полезнее <dfn>.
+1
Hover me! — это не аббревиатура, значит это в вашем случае отход от семантики.
0
Псевдо-элементы из CSS2, случайный data-атрибут и смотрите — уже красивый заголовок про CSS3 и HTML5. Класс!
0
Для вас был написан дисклеймер. Т.к. новые attr() атрибуты ещё не поддерживаются, то на большее пока рассчитывать нельзя.
+1
Дисклеймер читал. Просто писать «N на CSS3 и HTML5» это как «СЕКС. ШОК. ФОТО», жёлтенько.
0
На самом деле здесь огромный простор для фантазии, просто не хотелось усложнять простой пример украшательствами.
0
Было бы неплохо указать в каких браузерах работает эта фича.
+1
Firefox 3+, Opera 9.6+, Chrome, IE9+
В теории, она должна работать везде, где есть псевдоэлементы и поддерживается псевдокласс :hover.
0
Прочитав заголовок, подумал что это пост «Good news, everyone! Решение найдено!». Однако…
«overflow:hidden» — непобедимый враг всех кастомных тултипов. Ваш пример можно испортить так:
.coo {width:300px; overflow:hidden; position:relative}
UFO landed and left these words here
Only those users with full accounts are able to leave comments.  , please.