Верхний блок над шапкой
Всплывающие подсказки (jtooltip)
Категории:
Базовые (обязательные) классы и атрибуты
.js__jtooltip
js-класс, объявляет, что, при наведении на элемент, будет всплывать подсказка
data-jtooltip-title="содержимое подсказки"
атрибут задает содержимое подсказки (текст или html-код)
Пример:
<div class="js__jtooltip inlb p10 bg-light-grey" data-jtooltip-title="содержимое всплывающей подсказки">.js__jtooltip .inlb .p10 .bg-light-grey data-jtooltip-title="содержимое всплывающей подсказки"</div>.js__jtooltip .inlb .p10 .bg-light-grey data-jtooltip-title="содержимое всплывающей подсказки"
Дополнительные классы
.js__jtooltip-t, .js__jtooltip-r, .js__jtooltip-b, .js__jtooltip-l
устанавливает положение подсказки. По умолчанию подсказка снизу (аналогично .js__jtooltip-b). Для корректной работы этих классов необходимо наличие места с указанной стороны. При его отсутствии, подсказка будет выведена с той стороны, с которой есть свободное место
.js__jtooltip-s_white, .js__jtooltip-s_grey, .js__jtooltip-s_dark
устанавливает стили всплывающей подсказки
.js__jtooltip-s_название-класса
добавляет новый (пользовательский) класс на всплывающую подсказку
Примеры:
<div class="js__jtooltip js__jtooltip-t js__jtooltip-s_grey inlb p10 bg-light-grey" data-jtooltip-title='<div class="big bold mb20">содержимое всплывающей подсказки</div><p>в виде html-кода</p>'>.js__jtooltip .js__jtooltip-t .js__jtooltip-s_grey .inlb .p10 .bg-light-grey data-jtooltip-title='html-код'</div>.js__jtooltip .js__jtooltip-t .js__jtooltip-s_grey .inlb .p10 .bg-light-grey data-jtooltip-title='html-код'
<div class="js__jtooltip js__jtooltip-r js__jtooltip-s_white inlb w50 p10 bg-light-grey" data-jtooltip-title="содержимое всплывающей подсказки">.js__jtooltip .js__jtooltip-r .js__jtooltip-s_white .inlb .w50 .p10 .bg-light-grey data-jtooltip-title="содержимое всплывающей подсказки"</div>.js__jtooltip .js__jtooltip-r .js__jtooltip-s_white .inlb .w50 .p10 .bg-light-grey data-jtooltip-title="содержимое всплывающей подсказки"
<div class="js__jtooltip js__jtooltip-l js__jtooltip-s_dark fr w50 p10 bg-light-grey" data-jtooltip-title="содержимое всплывающей подсказки">.js__jtooltip .js__jtooltip-l .js__jtooltip-s_dark .fr .w50 .p10 .bg-light-grey</div>.js__jtooltip .js__jtooltip-l .js__jtooltip-s_dark .fr .w50 .p10 .bg-light-grey
<div class="js__jtooltip js__jtooltip-r js__jtooltip-s_dark fr w50 p10 bg-light-grey" data-jtooltip-title="содержимое всплывающей подсказки">.js__jtooltip .js__jtooltip-r .js__jtooltip-s_dark .fr .w50 .p10 .bg-light-grey <br> Блок с подсказкой слева (место слева отсутствует)</div>.js__jtooltip .js__jtooltip-r .js__jtooltip-s_dark .fr .w50 .p10 .bg-light-grey
Блок с подсказкой справа (место справа отсутствует)
Блок с подсказкой справа (место справа отсутствует)
Доступны Javascript опции и события jTooltip.readme.md
