Личный кабинет OneBox CRM
Связаться с нами
+38 (067) 328-75-45
+38 (050) 324-46-54
Кабинет клиентаБаза знаний › Просмотр базы знаний

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

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


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

Для инициализации всплывающей подсказки необходимо использовать класс
.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>

Пример