Всплывающие подсказки «Tool-Tipp» могут быть очень полезным инструментом на странице, например, для того, что бы посетитель получил дополнительную информацию, для сокращения или пояснения иностранных слов. Такая подсказка появляется при наведении курсора на слово в виде небольшого всплывающего окна.
С появившимся в HTML5 атрибутом «Data» информация может быть применена к любым отдельным элементам . Эти атрибуты могут быть считаны с помощью CSS3 и, таким образом показать содержание подсказки.
Как создать пользовательский атрибут?
Все эти атрибуты начинаются с «data-«, а затем добавляется уникальное имя.
В HTML дополнительная информация для слова записывается следующим образом:
<span class="tooltip" data-tooltip="HyperText Markup Language"> HTML </span>
Теперь начинается настоящая работа, потому что это подсказка разработана с CSS3. Для начала, подсказка получает «position: relative«, что бы она правильно позиционировалась.
[data-tooltip] {
position: relative;
display: inline-block;
}
В следующем шаге с помощью псевдо-элемента «:before» создаётся стрелка, указывающая на поясняемое слово. При этом, что бы псевдо-элемент отображался, «content» должен присутствовать, даже если он, как в этом случае, остаётся пустой. Стрелка появляется только при наведении указателем мыши на слово и элемент становится невидимым «visibility: hidden. И с помощью «opacity» от «0» к «1» медленно появляется. При использовани «margin-top» стрелка сначала появится над словом (-8px), а затем перенесётся в течение 0,3 сек под слово (margin-top: 5px).
[data-tooltip]:before {
content: '';
position: absolute;
visibility: hidden;
opacity: 0;
width: 0;
margin-top: -8px;
border: 8px solid transparent;
border-bottom: 10px solid #568bbc;
border-top: none;
z-index: 1001;
transition: .3s;
}
[data-tooltip]:hover:before,
[data-tooltip]:focus:before {
visibility: visible;
opacity: 1;
margin-top: 5px;
}
.tooltip:before {
top: 100%;
left: 45%;
}
span.tooltip {
cursor: help;
border-bottom: 1px dotted #000;
line-height: 1.1em;
}
Для того, что бы сделать фон для подсказки, используется псевдо-элемент «:after». При этом, можно добавить тень вокруг острия стрелки так, чтобы она лучше выделялась на фоне текста.
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
visibility: hidden;
opacity: 0;
margin-top: -1px;
padding: 8px 10px;
background: linear-gradient(#568bbc,#39648c);
border-radius: 5px;
text-shadow: 0 -1px 0 #000;
font-size: .75em;
line-height: 1.4em;
white-space: nowrap;
color: #fff;
box-shadow: 10px 10px 12px #111;
z-index: 1001;
transition: .3s;
}
[data-tooltip]:hover:after,
[data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
margin-top: 5px;
}
.tooltip:after {
top: 100%;
left: 45%;
margin-left: -50%;
}
Вот и все! Подсказка для тестирования готова!
Совет: Подсказки, с помощью команды » white-space: nowrap » располагаются всегда в ряд, но для длинных текстов, желательно удалить эту деталь и работать с определенной шириной или высотой.