6496 Андрей Барткевич 15 Октября 2016



Подсказки (tooltips) на чистом CSSCSS 3

Многие разработчики сайтов до сих пор используют JavaScript для создания подсказок, но самом деле на CSS их сделать гораздо проще.

Самым лёгким решением будет прописать текст подсказки в data-атрибуте HTML-кода, например,  data-tooltip="…". Теперь можно использовать CSS для отображения текста подсказки в функции attr():
.tooltip::after {
    content: attr(data-tooltip);
}
Всё очень даже просто.
Но, для стилизации нужно больше кода, и к счастью, для этого есть прекрасная библиотека Hint.css. Её можно использовать для дизайна подсказок и весит она совсем не много (1.5kb).

Демо
Github

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


98

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов