Hint.css
Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript. Полноценная библиотека CSS, которая содержит в себе множество различных вариантов всплывающих подсказок и не только. Имея под рукой данный инструмент, можно полностью быть уверенным, что примеров хватит на долго. Данное решение очень простое и установка не займет много времени. По желанию вы можете изменить размер текста и цвет всплывающих подсказок.
Установка: Для начала скачиваете архив с нашего сайта и папку CSS загружаете в свой файловый менеджер
Далее подключаете стили подсказок либо на странице:
Код
<link rel="stylesheet" type="text/css" href="/css/hint.min.css">
Либо вставляете в самый вверх Вашего CSS:
Код
@import url("/css/hint.min.css");
Низ-право:
Код
<a href="javascript:void(0)" data-hint="bottom-right" class="hint--bottom-right">bottom-right</a>
Низ:
Код
<a href="javascript:void(0)" data-hint="bottom" class="hint--bottom">bottom</a>
Низ-лево:
Код
<a href="javascript:void(0)" data-hint="bottom-left" class="hint--bottom-left">bottom-left</a>
Право:
Код
<a href="javascript:void(0)" data-hint="right" class="hint--right">right</a>
Лево:
Код
<a href="javascript:void(0)" data-hint="left" class="hint--left">left</a>
Верх-право:
Код
<a href="javascript:void(0)" data-hint="top-right" class="hint--top-right">top-right</a>
Верх:
Код
<a href="javascript:void(0)" data-hint="top" class="hint--top">top</a>
Верх-лево:
Код
<a href="javascript:void(0)" data-hint="top-left" class="hint--top-left">top-left</a>