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

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


Конечно, вышеприведённый код написан на правах теории.
если изображение носит чисто оформительский характер, как в примере — иконка, то лучше не перетаскивать ее из css в хтмл. для других случаев как раз и предусмотрен пример №2.
Есть готовые jquery решения, не вижу смысла городить свое, правда.
К примеру craigsworks.com/projects/qtip/ очень мощный.
Есть и множество более простых вариаций.
Осталось сделать этот тултип рабочим на устройствах без мышиного курсора.
проблема в том что его положение фиксировано, если линк расположен на границе экрана
то tooltip вылазит за пределы и не читабелен, хотя даже многие решения на jQuery болеют тем же
согласен, что положение баллунов и тултипов на надо расчитывать скриптом, к сожалению css в этом деле нам не помощник(
Тултип просто с другой стороны от текста выводится и за пределы экрана не вылазит.
UFO landed and left these words here
А вы страницу открывали? Я понятия не имею, как это работает, но в опере и хроме тултип отобразился с другой стороны от текста.
а если ссылку к верхней границе подогнать скролом??
у меня tooltip вылазит
Неплохо, открыл для себя свойство content: attr(data-tooltip) в css
Раздвигающиеся кнопки — очень креативно. Спасибо, отличная стать.я
Можно спросить? Отход от семантики это обязательное условие работы этого кода или все-таки ничего не мешает сделать стандартно:
<abbr title="I'm small tooltip. Don't kill me!">Hover me!</abbr>
тогда поверх кастомного тултипа всплывет родной, браузерный
Нееее. title как раз семантически предназначен для таких вещей. Просто задачка, как мне показалось, снова свелась к красивостям за счет ухудшения семантики. Вот я и уточняю, можно ли как-то решить без жертв?
dfn мне тоже пришёл в голову, но я подумал, что тултип не обязательно вешается на термин. В примере так точно не на термин.
По той же причине я укзал <abbr>, на который (а еще на <acronym>) тултипы вешаются чаще всего. А Таким «Hover me!» они нужны очень редко и тут действительно полезнее <dfn>.
Hover me! — это не аббревиатура, значит это в вашем случае отход от семантики.
Псевдо-элементы из CSS2, случайный data-атрибут и смотрите — уже красивый заголовок про CSS3 и HTML5. Класс!
Для вас был написан дисклеймер. Т.к. новые attr() атрибуты ещё не поддерживаются, то на большее пока рассчитывать нельзя.
Дисклеймер читал. Просто писать «N на CSS3 и HTML5» это как «СЕКС. ШОК. ФОТО», жёлтенько.
На самом деле здесь огромный простор для фантазии, просто не хотелось усложнять простой пример украшательствами.
Было бы неплохо указать в каких браузерах работает эта фича.
Firefox 3+, Opera 9.6+, Chrome, IE9+
В теории, она должна работать везде, где есть псевдоэлементы и поддерживается псевдокласс :hover.
Прочитав заголовок, подумал что это пост «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. Log in, please.