CSS3 tooltips

Toolips (подсказки) можно организовать несколькими способами:

1. используя атрибут title


<a href="#" title="usual tooltip">Link</a>


Самый простой способ, но тултипы получаются стандартными и поэтому оооочень скуууучни. К тому же их вид зависит от браузера (( Т.е. почти все браузеры отображают их небольшими желтыми лейбочками внизу, но они совершенно не поддаются стилизации.

2. при помощи js (jQuery Tooltip Plugin)


<div id="tooltip">
...
</div>

Как правило, эта конструкция добавляется в низ страницы и абсолютно позиционируется применительно к нужному элементу.

Тултипы красиви, сочни, вкусни. Но для тех, кто не боится нагружать клиента ещё одним ломтиком яваскрипта.

3. css


<a href="#">
Link
<span>Tooltip<span>
</a>

Хорошая альтернатива яваскриптовому решению. Присутствуют все нужные плюшки, разве что не очень семантично, отчего ссылка перегружается излишней информацией.

4. css3

<a href="#" data-tooltip="tooltip" >
Link
</a>


Та-дамм!! Усовершенствованный метод + семантика. Впрочем, достоинства и недостатки обсудим позже, после рассмотрения подробностей реализации =)
Реализуем пример справа:

HTML:

<a href="#" data-tooltip="Beautiful tooltip">Link</a>


CSS:

*[data-tooltip] {
position: relative;
text-decoration: none;

&:after,
&:before {
@include opacity(0);

content: '';
outline: none;
z-index: 3;
}

&:hover,
&:focus {
&:after {
@include border-radius(2px);
@include opacity(1);

background: #464746;
bottom: 115%;
color: #fff;
content: attr(data-tooltip);
display: block;
font-size: 12px;
font-weight: normal;
left: -50%;
line-height: 1.3em;
min-height: 13px;
outline: none;
padding: 7px 10px;
position: absolute;
text-align: left;
text-shadow: none;
max-width: 250px;
}
}
}


Как это работает:

текст тултипа описывается в аттрибуте ссылки data-tooltip, показывается он через псевдоэлемент :after, а добавляется в стилях через свойство content: attr(data-tooltip). Далее просто добавляется позиционирование и стилизуется по макету.

+ Advantage:

• work in IE8+, Chrome 4+, Safari 4+, Firefox 3.6+ and Opera 10+;
• quicker than js;
• more comfortable on iPad

- Imperfection:

• can't use html tags inside tooltip;
• not for <img />;
• title for <a> must be removed.

Arrows:

Подобным образом (с использованием псевдоэлементов :after и :before) можно организовать и простые стрелки, не требующие наличия тени или сложных градиентов.

*[data-tooltip] {
&:hover,
&:focus {
&:before {
@include opacity(1);

border-bottom: transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #464746;
content: '';
outline: none;
display: block;
font-size: 0;
height: 0;
left: 8px;
line-height: 0;
position: absolute;
top: -15%;
width: 0;
}
}
}

+ Advantage:

• no image

- Imperfection:

• can't use shadow or gradient, just solid