Всплывающие подсказки

Зачастую разрабатывая функционал, возникает потребность в дополнительлной всплывающей информацией, которая будет отображать подсказки или дополнительные данные.

Стандартная подсказка

Для инициализации всплывающей подсказки необходимо использовать класс

.js-tooltip

, а так же атрибут title, который будет содержать текст подсказки.

<a href="#" class="ob-button js-tooltip" title="Text description">Hover me!</a>

Пример

Подсказка карточка пользователя

Для инициализации всплывающей подсказки необходимо использовать класс

.js-contact-preview

, а так же атрибут data-id, который будет содержать идентификатор пользователя.

<a href="#" class="ob-button js-contact-preview" data-id="1">Hover me!</a>

Пример

Подсказка карточка продукта

Для инициализации всплывающей подсказки необходимо использовать класс

.js-product-preview

или

.js-product-preview-click

(в зависимости от фунционала), а так же атрибут data-id, который будет содержать идентификатор продукта.

<a href="#" class="ob-button js-product-preview" data-id="1">Hover me!</a>
<a href="#" class="ob-button js-product-preview-click" data-id="1">Hover me!</a>

Пример

Подсказка карточка задачи

Для инициализации всплывающей подсказки необходимо использовать класс

.js-issue-preview

, а так же атрибут data-id, который будет содержать идентификатор задачи.

<a href="#" class="ob-button js-issue-preview" data-id="1">Hover me!</a>

Пример

Пользовательский шаблон подсказки

Для инициализации всплывающей подсказки необходимо использовать класс

.js-tooltip-custom

, а так же атрибуты data-content и data-position, которые будут содержать параметры инициализации.
Сам же контент кастомной подсказки необходимо разместить в блоке с классом, который вы укажите в атрибуте data-content и скрыть его (style="display: none;"). А атрибут data-position нужен для указания позиции подсказки (left, right,top или bottom).

<a href="#" class="ob-button js-tooltip-custom"
            data-position="right"
            data-content="js-my-custom-tooltip">Hover me!</a>

<div class="js-my-custom-tooltip" style="display: none;">
   Привет!<br>
   У меня собственный шаблон, с <strong>HTML</strong> структурой.
   <br>Это здорово!
</div>

Пример